FireworksマニアTOP > Fireworksデザインレシピ,Fireworksベーシック,ストローク,パターン,未分類 > Fireworksで壁にかかった額縁のデザインを作るレシピ

Fireworksで壁にかかった額縁のデザインを作るレシピ

カテゴリー: Fireworksデザインレシピ,Fireworksベーシック,ストローク,パターン,未分類

久しぶりの更新です!
今日は、こんな感じの壁にかけたフォトフレームのデザインを簡単に作る方法をご紹介します♪

01

新規カンバスをひらきます。
今回は大きめに、幅:1500、高さ:800で作成します。

02

カンバスが開いたら、はじめにレイヤーを整理しておきましょう。
これをやっておくことによって、同じデザインのフレームをたくさん配置する作業が楽になります。

まず、レイヤーパネルを表示して【レイヤー1】となっている部分をダブルクリックして名前を編集できる状態にします。
ここを【背景】という名前にします。

03

レイヤーを追加していきます。
レイヤーパネル右上のメニューボタンをクリックして、【新規レイヤー…】を選択します。

04

【額】という名前を付けます。

05

次に額というレイヤーにサブレイヤーを作っていきます。
先ほど同様、レイヤーパネル右上のメニューボタンから【新規サブレイヤー…】をクリックします。

06

図のように4つのサブレイヤーを作成したら準備完了です。

07

背景を描画していきますので、背景レイヤーをクリックして選択しておきます。

08

右側の【ツール】から【長方形ツール】を選択します。

09

画面全体を覆うように長方形を描きます。
色はあとから変更しますので何色で描いていてもかまいません。

10

パターンを設定して、見た目を整えていきます。
先ほど描画した長方形が選択された状態で、下部の【プロパティパネル】から塗りを変更していきます。
図で囲んである【パターン】のボタンを押すとパターン選択画面が表示されます。
一覧から【織物 02】を選択してください。

11

パターンを適用するとハンドルが表示されます。
図のように動かして壁紙風に見えるよう、模様を細かく、斜めに設定します。

12

パターンの色を白くしてより壁紙に近づけていきます。

【プロパティインスペクタ】右側のフィルターメニューから【カラーを調整】→【カーブ…】を選択します。

13

図のようにカーブを曲げます。
お好みで調整してかまいません。

14

これで背景ができあがりました。
次に、額の元となる長方形を描画していきます。

レイヤーパネルから【額背景】レイヤーを選択します。
先ほどと同様【長方形ツール】を選択して長方形を描画します。
 

15

この長方形を【フレーム】と【カバー】のレイヤーにもコピーしておきます。
先ほど描画した長方形を選択して【Command(Control)】+【C】でコピーし、それぞれのレイヤー名をクリックして【Command(Control)】+【V】でペーストします。

16

次に額の中に入れる写真を配置していきます。
使用したい写真を開き、【写真】レイヤーに配置します。

このとき、作業しやすいよう【フレーム】レイヤーと【カバー】レイヤーは目玉マークをクリックしてレイヤーごと非表示にしておきましょう。

17

今回はこの写真にくぼんだような加工をしていきます。
読み込んだ写真を選択した状態で、【プロパティインスペクタ】の【フィルター】から【ベベルとエンボス】→【ベベル(内側)】を選択します。

18

値を図のように設定します。

19

これで一段下にあるようなくぼんだ効果と、プリントアウトした写真のような雰囲気が出ます。

20

次にフレーム部分を作成していきます。

先ほどレイヤーパネルから【フレーム】レイヤーを非表示にしていたので、先ほど目玉があった部分をクリックして再度レイヤーを表示させます。

21

フレームレイヤーの長方形を選択し、【プロパティインスペクタ】から
【塗り:なし】【線:#FFFFFF(白)、線の太さ:15、線の位置:中央揃え、線の種類:基本→エッジが硬い線(角)】に設定します。

白いボーターのみの枠ができます。

22

次にフレームのような装飾をしていきます。

【フィルター】メニューから【ベベルとエンボス】→【ベベル(内側)】を選択し、図のように設定します。

23

次に【フィルター】メニューから【ベベルとエンボス】→【ベベル(外側)】を選択し、図のように設定します。
額縁のような枠ができます。

24

もっと白っぽい枠にしたいので、色味を変更して行きます。

【フィルター】メニューから【カラーを調整】→【カーブ】を選択し、図のように設定します。

明るいフレームになりました。

 

25

次にドロップシャドウをつけ、影を表現していきます。
【フィルター】メニューから【シャドウとグロー】→【ドロップシャドウ】を選択し、図のように設定します。

これでフレームの完成です。

26

次に、カバーを作成していきます。
カバーとは、写真を保護しているプラスチックのカバーのイメージです。
これに反射を表現していきます。

先ほど同様、レイヤーが非表示になっていますので、カバーのレイヤーを表示させます。

27

【カバー】レイヤーにある長方形にグラデーションをかけていきます。
長方形を選択した状態で【プロパティインスペクタ】から塗りをグラデーションに設定します。

図のここをクリックと書いている部分をクリックして、透明度のポイントを追加しておきます。

28

カラーと透明度を変更していきます。
下の二つのポイントはどちらも白(#FFFFFF)に設定します。
上のポイントは真ん中は50%程度、両サイドも80%程度で写真を見ながら適切な透明度に調整します。

29

グラデーションの方向を図のように斜めに設定し、透明度も微調整していきます。

これで額縁に入った写真の完成です!

30

これを複数作成していくときは【属性のペースト】を使用すると便利です。

作成したフレームのデザインを選択してコピーします。

31

貼付けたいオブジェクトを選択して【属性をペースト】します。

33

この時、きちんとレイヤーわけしておくとレイヤーパネルからレイヤー名をクリックするだけでそのレイヤーに配置されているオブジェクトが一括で選択できるので便利です。まとめて【属性をペースト】が行えます。

32

まとめて同じ見た目に変更できました。

34

完成です!

1281-sampleA

背景や額縁の色を変えればいろいろなイメージがつくれます。

1281-sampleB

写真を全体に引き延ばしたり。

1281-sampleC

さらにフレームを太く。

1281-sampleD

1281-sampleE

今回のPNGファイルはこちらからダウンロードできます。
ページ機能を使って全バリエーションを1ファイルにまとめています。

255-13

簡単なのでぜひお試しくださいね♪

 

おまけ

このチュートリアルを使って作成したフレームを使ってWordPressテーマを作りました。
こんなかんじで活用できます☆

http://gallery.v-colors.com

YUKI YAMAGUCHI PHOTO GALLERY

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

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

関連エントリー

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

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

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

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

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

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

Fireworksマニア

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