久々の更新ですみません…私は元気です!
最近、アメブロ界隈のコミュニティーに興味があって、
どんなものなのか知りたくてアメブロをちょっとはじめてみました☆
アメブロ用にデザインを作ったので、
今日はそのデザインの作り方を解説していきたいと思います☆
どのパーツも少ないステップ数であっという間にできますのでぜひ試してみてくださいー!
カンバスの準備
まず新規ドキュメントを開きます。
今回は1200ピクセル×1200ピクセルのカンバスサイズで開きました。
背景の描画
画面を覆うように長方形ツールで四角を描きます。
色は#FFEACBにしました。
これにうっすらと見えるか見えないかぐらいの質感を与えます。
【テクスチャ】で木目を67%でかけます。
すごーく拡大するとテクスチャが当たっているのがわかるぐらいです。
ヘッダー部分のパーツ作成
次にヘッダー部分を作り込んで行きます。
茶色の破れたような表現部分
まずはページ上部の紙の破れたような部分です。
この部分は上部の茶色の部分をがたがたにし、内側に影をつけることによってベージュの紙が破れているように見えるようにします。
【パスツール】を長押しして【ベクトルパスルール】に切り替えます。
【ベクトルパスツール】でガタガタっと線を引いていきます。
破れたような質感にするためにわざとガタガタさせます。
※この時点でのストロークの種類はなんでもよいです。あとで変更します。
塗りはなしにしておいたほうが見やすいと思います。
ほどよいがたつきの線が引けたら【ベクトルパスツール】を長押しして【ペンツール】に持ち替えます。
ペンツールで長方形の形に点をつけたしていきます。
長方形になったら以下のように色をつけていきます。
塗りの色は #4B2627
ストローク(線)の色は #3D0000
ストロークの種類は【クレヨン】→【基本】
透明度を 66%とし、
内側にうっすらとシャドウをかけます。
レースのような飾りパーツ
レースのようなパーツを書いていきます。
これは以前に紹介したように星ツールを使って書きます。
詳しくはこちらのエントリーをどうぞ。
わかりやすいように塗りを黒にして書いています。
白に変えて配置します。
タイトルのパーツ
次にタイトルの部分です。
【ペンツール】を使い、点をランダムに四点打ち、四角を書いていきます。
それぞれに色、テクスチャ、透明度を設定していきます。
今回は5パターン作りました。
それぞれスタイル登録して、他の文字の背景にも使い回します。
スタイルの登録方法がわからない方は
Fireworksでさくっと縫い目を表現する方法の最後の方で解説していますのでそちらをどうぞ。
丸いふわっとしたパーツ
丸いふわっとしたパーツも【ベクトルパスツール】でまるーく描きます。
お洋服や帽子のイラスト素材の加工
お洋服等のイラスト素材はハンコでアソブさんのフリー素材を使用させていただきました。
商用利用もOKのPNG素材を配布してくださっているサイトさんです。とってもかわいくておすすめ!!
黒のデータなので、【フィルタ】→【色相・彩度】で色を調整します。
色相・彩度の調整方法について詳しく知りたい方はFireworksで表現する シンプル&カラフルな布の作り方を参照してください。
破線を引く
破線を引いて行きます。
プロパティは以下の通り。
破線の設定がよくわからない…というかたはFireworksでさくっと縫い目を表現する方法を参考にどうぞ
ドットの破線
細い破線
ボックスを書く
ボックスを書いていきます。
ほんのり影をつけます。
影の色は#000000にして、透明度を調整するようにすると自然な影がつけられます。
ボタンを作る
ボタンを作っていきます。以下のように設定しました。
線を3pxの白にテクスチャにメタルを25%で使用しています。
こちらもほんのりとグローをかけました。
色は#000000です。
こちらのボックスも以下のように設定します。
メニュー見出し
メニューの見出しを作ります。
それぞれ色を変え、テクスチャに砂壁を15%でかけています。
できあがり
ぜーんぶあわせたら完成です!!
コーディングして、こんな感じに仕上がりました。
どのパーツもとっても簡単な手順でできますのでぜひ試してみてくださいね♪
ちなみにアメブロはこちら。
http://ameblo.jp/yuki-930/
アメブロ界隈で学んだことや、あとは適当にだらだらと毎日のことを書いていこうかと思っています。
アメブロ詳しいかた、よかったらいろいろ教えてくださいませー!