FireworksマニアTOP > Fireworksデザインレシピ,ストローク,テクスチャ > ナチュラル系ブログデザインをFireworksで手早く作るレシピ

ナチュラル系ブログデザインをFireworksで手早く作るレシピ

カテゴリー: Fireworksデザインレシピ,ストローク,テクスチャ

 

久々の更新ですみません…私は元気です!

 

最近、アメブロ界隈のコミュニティーに興味があって、
どんなものなのか知りたくてアメブロをちょっとはじめてみました☆

アメブロ用にデザインを作ったので、
今日はそのデザインの作り方を解説していきたいと思います☆

どのパーツも少ないステップ数であっという間にできますのでぜひ試してみてくださいー!

856-000

カンバスの準備

まず新規ドキュメントを開きます。

今回は1200ピクセル×1200ピクセルのカンバスサイズで開きました。

856-001

背景の描画

画面を覆うように長方形ツールで四角を描きます。

856-002

色は#FFEACBにしました。

これにうっすらと見えるか見えないかぐらいの質感を与えます。

【テクスチャ】で木目を67%でかけます。

856-003

すごーく拡大するとテクスチャが当たっているのがわかるぐらいです。

856-004

ヘッダー部分のパーツ作成

次にヘッダー部分を作り込んで行きます。

茶色の破れたような表現部分

まずはページ上部の紙の破れたような部分です。

この部分は上部の茶色の部分をがたがたにし、内側に影をつけることによってベージュの紙が破れているように見えるようにします。

【パスツール】を長押しして【ベクトルパスルール】に切り替えます。
【ベクトルパスツール】でガタガタっと線を引いていきます。

破れたような質感にするためにわざとガタガタさせます。

※この時点でのストロークの種類はなんでもよいです。あとで変更します。
塗りはなしにしておいたほうが見やすいと思います。

 

856-005

ほどよいがたつきの線が引けたら【ベクトルパスツール】を長押しして【ペンツール】に持ち替えます。

ペンツールで長方形の形に点をつけたしていきます。

856-006

長方形になったら以下のように色をつけていきます。

塗りの色は #4B2627
ストローク(線)の色は #3D0000

ストロークの種類は【クレヨン】→【基本】

透明度を 66%とし、

内側にうっすらとシャドウをかけます。

856-007

レースのような飾りパーツ

レースのようなパーツを書いていきます。
これは以前に紹介したように星ツールを使って書きます。

詳しくはこちらのエントリーをどうぞ。

Fireworksの星ツールでつくる、星以外の形いろいろ

わかりやすいように塗りを黒にして書いています。
白に変えて配置します。

856-008

 

タイトルのパーツ

次にタイトルの部分です。

【ペンツール】を使い、点をランダムに四点打ち、四角を書いていきます。

856-009

それぞれに色、テクスチャ、透明度を設定していきます。

今回は5パターン作りました。

それぞれスタイル登録して、他の文字の背景にも使い回します。

スタイルの登録方法がわからない方は
Fireworksでさくっと縫い目を表現する方法の最後の方で解説していますのでそちらをどうぞ。
 

856-010

丸いふわっとしたパーツ

丸いふわっとしたパーツも【ベクトルパスツール】でまるーく描きます。

856-011

お洋服や帽子のイラスト素材の加工

お洋服等のイラスト素材はハンコでアソブさんのフリー素材を使用させていただきました。
商用利用もOKのPNG素材を配布してくださっているサイトさんです。とってもかわいくておすすめ!!

黒のデータなので、【フィルタ】→【色相・彩度】で色を調整します。

色相・彩度の調整方法について詳しく知りたい方はFireworksで表現する シンプル&カラフルな布の作り方を参照してください。

856-012

破線を引く

破線を引いて行きます。

プロパティは以下の通り。

破線の設定がよくわからない…というかたはFireworksでさくっと縫い目を表現する方法を参考にどうぞ

ドットの破線

856-013

細い破線

856-014

ボックスを書く

ボックスを書いていきます。

ほんのり影をつけます。

影の色は#000000にして、透明度を調整するようにすると自然な影がつけられます。

856-016

ボタンを作る

ボタンを作っていきます。以下のように設定しました。

線を3pxの白にテクスチャにメタルを25%で使用しています。
こちらもほんのりとグローをかけました。

色は#000000です。

856-017

こちらのボックスも以下のように設定します。

856-018

メニュー見出し

メニューの見出しを作ります。

それぞれ色を変え、テクスチャに砂壁を15%でかけています。

856-019

 

 

できあがり

ぜーんぶあわせたら完成です!!

コーディングして、こんな感じに仕上がりました。

856-020

どのパーツもとっても簡単な手順でできますのでぜひ試してみてくださいね♪

ちなみにアメブロはこちら。
http://ameblo.jp/yuki-930/

アメブロ界隈で学んだことや、あとは適当にだらだらと毎日のことを書いていこうかと思っています。

アメブロ詳しいかた、よかったらいろいろ教えてくださいませー!

 

最後までお読み頂き、本当にありがとうございました。お気に召しましたらぜひ共有orクリップして頂けますと幸いです。またお会いできますように♪

Check このエントリーをはてなブックマークに追加 この記事をクリップ! コメントを見る Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

関連エントリー

このサイトを運営している人

YUKIと申します。福岡で働く会社員WEBデザイナーです。
フロッグマンオフィス所属。ショッピングカートのCS-Cartとかもやってます。

仕事以外でも趣味でいろいろサイトを作っています。
こういったTipsサイトや無料の素材屋さんにたくさんたくさんお世話になりながら勉強して、今ではWebデザインをお仕事としてやらせてもらえるようにまでなりました。

私もいつか誰かの役に立つサイトを作りたい!とずっと思っていたので、あいた時間を見つけてはこうしたサイトを作っています。
すこしでもお役に立てればとてもうれしいです^^

まわりの人にもご紹介いただけるとうれしいです。

たくさんの方に見ていただき、たくさんのご意見を頂くことは、記事の正確さや有益性を高めるだけでなく、新しい記事を書くモチベーションになります!
お気に召しましたらぜひまわりの方にもご紹介いただけるとうれしいです。リンクはご自由にどうぞ!

Fireworksマニア

バナーが必要な方はこちらをどうぞ♪
サイト名:Fireworksマニア URL:http://fw.v-colors.com/