Illustratorでシームレスパターンの作り方

ai-pattern00

皆さまごきげんよう。

本日はIllustratorでシームレスパターンを作ってみようと思います。

毎度自分が忘れがちな点を、備忘録としてまとめてみました。どうぞお付き合いください。

目次

  1. illustratorの初期設定
  2. レイヤー構造
  3. オブジェクトを配置しパターンを編集する
  4. オブジェクトの書き出し
  5. Illustratorでありがち、謎の小数点を消す
  6. Illustratorで書き出したパターンに白い線が出てしまう時の対処法
“Illustratorでシームレスパターンの作り方” の続きを読む

photoshopでシームレスパターンの作り方

ps08

皆さまごきげんよう。

今回はphotoshopでシームレスパターンを作り、パターンファイルを書き出してみます。

どうぞお付き合いください。

目次

  1. オブジェクトを配置しラップアラウンド
  2. シームレスパターンの作り方の基本
  3. パターンを編集する
  4. パターンの登録とファイルの書き出し
“photoshopでシームレスパターンの作り方” の続きを読む

ワードプレスの任意の要素ににp5.jsを実装する

2022.1.10 更新

皆さまごきげんよう。

本日は前回の記事、「ウェブサイトの任意の要素ににp5.jsを出力する」の実践編として、ワードプレスの任意の要素にp5.jsを表示させてみようと思います!(最初から読んでみたい方はこちら↓も合わせてご覧くださいませ)

目次

  1. p5のsketch.jsファイルを用意する
  2. sketch.jsファイルをphpファイルに読み込ませる
  3. ワードプレスに外部ファイルを読み込ませる
  4. まとめ
“ワードプレスの任意の要素ににp5.jsを実装する” の続きを読む

ウェブサイトの任意の要素ににp5.jsを出力する

2022.1.10 更新

皆さまごきげんよう。

本日は前回の続き、p5.jsで作ったスケッチを任意の要素に出力してみようと思います。

前回の記事はこちら→ウェブサイトの背景画像にp5.jsを使う方法

目次

  1. p5でsketch.jsファイルを作る
  2. htmlファイルを作る
  3. 任意の要素ににp5.jsを出力する
“ウェブサイトの任意の要素ににp5.jsを出力する” の続きを読む

cssアニメーションで文字を点滅させてみよう

2022.1.16 更新

皆さまごきげんよう。
サイトのどこかに小さな動きがあると一瞬目を惹きますよね。
本日はcssで文字を点滅させてみようと思います。

1.CSS animationを使って文字を点滅させる

まず、このサイトのヘッダー部分のタイトルをご覧ください。実際に実装してみましたよ。cssはこんな感じです。

“cssアニメーションで文字を点滅させてみよう” の続きを読む

skrollrでパララックスのランディングページを作ってみよう〜追記あり〜

2022.1.16 更新

皆さまこんにちは。

本日はskrollr再び!skrollrを使ってペラいちのランディングページを作ってみます。

まずはこちらにDEMOを作ってみましたのでご覧ください。
(※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m )

skrollrってなに?

パララックス(視差)効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます。まずはダウンロードしてみよう。

“skrollrでパララックスのランディングページを作ってみよう〜追記あり〜” の続きを読む

©2022 freyjasrm.com