アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Fireworksでちょっとリアルな雲を描く方法

こんにちは。和田です。
最近、だいぶ秋らしくなってきました。
上空は秋晴れの奇麗な空が広がっています。
そんな空を眺めていて、
ふっと、
簡単にFireWorksでリアルな雲は描けないかな…と思いチャレンジしてみました。
むちゃくちゃリアルではないですが、まぁそれなりに、それっぽくなった(多分)のでブログに書いてみようと思います。
↓出来上がりはこんな感じになります。


◆始める前に


それでは始める前にベースとなる画像(建物と空)を用意しておきます。
画像はあらかじめ空と建物にレイヤー分けしています。



そして今回は、
ブラシの「特殊ペン/広範囲のはね」を使って作ろうと思います。
「線幅:30px、線色:#FFFFFF」ブラシの「特殊ペン/広範囲のはね」を使うと以下のようなイメージになります。
このランダム?な円をたくさん重ね、ぼかし効果などを掛けて雲っぽくしようと思います。



それでは、

◆ステップ-1


大体の雲の形をイメージして、複数のオブジェクトを作成します(以下の画像のように)。
オブジェクトは「広範囲のはね」で出来る隙間をなくすように作って下さい。形はどんな形でもいいと思います。
ちなみに、今回は線幅:30px(画面上)と線幅:52px(画面下)の2種類を作ってみました。


・画面上:線幅:30px、線色:#FFFFFF、ブラシの:特殊ペン/広範囲のはね
・画面下:線幅:52px、線色:#FFFFFF、ブラシの:特殊ペン/広範囲のはね


◆ステップ-2


次に「ステップ-1」で作成したオブジェクトにフィルタの「ぼかし(ガウス)」を掛けます。
画面下の雲は遠いところにあるのをイメージしているので「ぼかし(移動)」も掛けてみました。


・画面上:ぼかし(ガウス):15px、
・画面下:ぼかし(ガウス):15px、ぼかし(移動): 角度353度、距離80

※ 雰囲気を出す為に雲にドロップシャドウを掛けてもいいと思います。
  今回は掛けていません。

ステップ-3


物足りなかったので、画面右上に雲を追加してみました。
この雲は楕円で作成していますが、作り方はステップ1,2と同じようにしています。


では、建物の画像を上から被せて出来上がりです。




雲の形がイマイチ…ですが(汗)
まぁそれなりにそれっぽくなったかと…思います。
(大目に見てやって下さい)

今回の作成方法は簡単なのですが「広範囲のはね」のはね方が、毎回均一に出てしまうので、そこをわからなくするのがポイントかと思います。
他に良い方法があると思うのですが、今回はこれしか思いつきませんでした。
もっと良い方法が見つかりましたらブログに書きたいと思います。

それでは、また次回です。

イコライザーをFireworksで描いてみました

こんにちは。和田です。

最近、会社の中で音楽を趣味にしていたり音響に詳しい人たちが増えて来たように思えます(今まで知らなかっただけかもしれませんが…)。
ということで、今回は音楽ネタを描こうと思います。

じゃあ、何を描こうかな…と思った時に、ふとイコライザーが頭に浮かんだので、今回はイコライザーFireworksで描いてみようと思います。
今回も例によって簡単に出来るので皆様も是非描いてみて下さい。

それでは作成したいと思います。
まず始めに640×500pxの新規ファイルを作成します。

そして、

1.背景を作成します。
1-1.背景の矩形を作成します
 ・サイズ:640×500px
 ・塗り:線形グラデーション
     #404040 → #202020
 ・フィルタ(ノイズを追加):適用量 = 2




↓背景はこんな感じになります。



1-1.背景にハイライトを追加します。
質感をつけるためハイライトを加えます。
□上段の楕円 
・サイズ:505×162px程度
 ・塗り:ベタ塗り(#FFFFFF)
・ エッジ:エッジをぼかす(100程度)
ブレンドモード:オーバーレイ
・ 不透明度:50%

□下段の楕円 
・サイズ:373×184px程度
 ・塗り:ベタ塗り(#FFFFFF)
 ・エッジ:エッジをぼかす(94程度)←100でかまいません。
ブレンドモード:オーバーレイ
・ 不透明度:30%





↓こんな感じになります。



2.インターフェース部分の作成。
2-1.溝の矩形を作成します
 ・サイズ:9×214px程度
 ・塗り:ベタ塗り(#999999)



これに、

 ・ブレンドモード:ソフトライト
 ・丸み:2px



 ・フィルタ:Photoshopライブエフェクト
  →ドロップシャドウ
   ・不透明度:40%
   ・距離:1px
   ・角度:180度
   ・サイズ:0
   ・スプレッド:0
  →シャドウ(内側)
   ・不透明度:90%
   ・距離:4px
   ・角度:180度
   ・サイズ:80px
   ・スプレッド:10
  →カラーオーバーレイ
   ・不透明度:40%
   ・カラー:#000000





↓そうすると、こんな感じになります。



そして、横方向に等間隔にコピーします。
一番右端の溝はLevelのコントロール部分にしようと思うので、右に少しずらしました。




2-2. 目盛の線を作成します
等間隔にそれらしいラインを下記の画像のように作成してみて下さい。
 ・線:1 or 3px
 ・カラー(#FFFFFF)
 ※ 今回は目盛の間隔を15pxにしました。



そして、溝の間にも目盛を描き、全部の目盛に対してブレンドモード(ソフトライト)をかけます。
こうすることで、目盛が背景になじみます。




2-3.ツマミの矩形を作成します
ツマミは下記の画像のように6種類の矩形を作成します。
形はそれっぽく作ってみて下さい。

❶ 塗り:ベタ塗り(#2E2E2E)
❷ 塗り:ベタ塗り(#202020)
❸ 塗り:ベタ塗り(#171717)
❹ 塗り:ベタ塗り(#111111)
❺ 塗り:ベタ塗り(#3C3C3C)
❻ 塗り:ベタ塗り(#4D4D4D)




※ 上記6種類の矩形にフィルタ(ノイズを追加:適用量 = 1)をかけます。
こうすることで、ザラッ(?)とした質感を出します。



次に❸の矩形にハイライトをつけるため下記のフィルタをかけます。
・フィルタ:Photoshopライブエフェクト
 →ベベルとエンボス
  ・スタイル:ベベル(内側)
  ・テクニック:ズーム
  ・方向:アップ
  ・深さ:140
  ・サイズ:0
  ・ソフト:0
  ・角度:90度
  ・ハイライト:20(#FFFFFF)
  ・シャドウ:0(#000000)



そうすると、下記のイメージになります。
大分それらしくなったかと思います。




そして、❶〜❻のオブジェクトをグループ化してドロップシャドウを付けてみて下さい。




あとは、ツマミをコピーして全ての溝の上に配置して下さい





最後に文字、タイトルを入れて出来上がりです。





いかがでしょうか?

それなりにそれっぽく描けたかと思います。
難しくないと思いますので、皆様も是非描いてみていただけたらと思います。

iCloud風のアイコンを作成する(Fireworks)

こんにちは。和田です。


今回はiCloud風のアイコンをFireworksで作成したいと思います。
オブジェクトは3つだけで作成できるのでとても簡単です。

それでは作成したいと思います。
まず始めに700×700pxの新規ファイルを作成します。

そして、

1.土台?となる部分の矩形を作成します。
 ・サイズ:512×512px
 ・丸み:94px
 ・塗り:線形グラデーション
  →グラデーションの値(番号は下記の画像に記載している番号を表しています。)
   (1) #DDDDDD
   (2) #89898B
   (3) #545456





2.次にステンレスのようなヘアライン効果のオブジェクトを作成します。

2-1.円の矩形を作成します。大きさは、「1」で作成したものより大きく作成します。
  大きく作成するのは、この後で設定するフィルタ(ぼかし(放射状))の効果を奇麗に反映させる為です。

 ・サイズ:646×646px
 ・塗り:円錐グラデーション
  →グラデーションの値
   (1) #E7E7E7
   (2) #B3B3B6
   (3) #9C9A9E
   (4) #F2F2F2
   (5) #F2F2F2
   (6) #9C9A9E
   (7) #F2F2F2
   (8) #F2F2F2
   (9) #9C9A9E
   (10) #9C9A9E
   (11) #F2F2F2
   (12) #F2F2F2
   (13) #9C9A9E
   (14) #9C9A9E
   (15) #C1C1C4
   (16) #C1C1C4





2-2.ヘアラインの効果を作成する為にノイズとぼかしを設定します。

 ・ノイズを追加:適用料:10
 ・ぼかし(放射状):
   適用量:30
   画質:100


ノイズがかかったイメージ


ぼかし(放射状)がかかったイメージ




2-3.「1」で作成したものより小さい矩形を作成してマスクをかけます。
  小さくすることでエンボスがかかったように見せる事が出来ます。
  但し、1点注意点があります。
  それは「2-1〜2」で作成したステンレスの矩形データはフィルターがかかっており、このままマスクをかけても上手くいきません。そこで矩形データを画像に変換してからマスクをかけます。
  画像に変換するには、
   ステンレスの矩形データを選択→その場で右クリック→メニューから「選択範囲を統合」を選ぶと画像に変換出来ます。

  ・サイズ
   幅:502px
   高さ:502px
   丸み:90px




こんな感じになります。
大分それらしくなってきました。



3.イラストの作成
3-1.アイコンの背景が出来ましたので、上に載せるイラストを矩形で作成します。
 ・塗り:#78787D




3-2.ここで、雲のイラストで色が塗られている部分に
  下地のヘアライン効果を反映させ、黒光りしたイメージにしたいので、描画モードを「焼き込み(カラー反転)」に変換します。




3-3.そして、イラスト部分を凹んだイメージにする為、下記のフィルターを設定します。

 (1)ベベルとエンボス(Photoshopライブエフェクト)

   構造--------------------------------------
    スタイル:ベベル(外側)深さ=200
    テクニック:スムーズ:サイズ=4
    方向:ダウン:ソフト=0

   陰影--------------------------------------
    角度:90度
    ハイライト:スクリーン(#FFFFFF):100
    シャドウ:乗算(#000000):60


 (2)シャドウ内側
   距離:5
   不透明度:100%
   ぼかし:2
   角度:315度




これで出来上がりです。
いかがでしょうか?
ちなみにいくつかバリエーションを作ってみました。




今回も簡単なので
皆様も是非作ってみて下さい。

2つのオブジェクトで古い紙の質感を作る(Fireworks)

こんにちは。和田です。
今回は、2つのオブジェクトで古い紙の質感を簡単に作ってみようと思います。
Photoshopだとフィルターの雲模様を使うと出来ると思うのですが、Fireworksには雲模様のようなフィルターが無いのでパターンやぼかしを使って作ってみます。

それでは、始めます。

1. 500×500pxの矩形オブジェクトを作成


まず、500×500pxの矩形オブジェクトを作成します。そして、古い紙のイメージを出すため、グラデーション(円形)を下図のように#F1F0E4 → #928B49で設定します。









2. 470×470pxの矩形オブジェクトを「1.」の矩形の上に作成


古い紙のまだらなイメージを出すため、「1.」よりも小さい矩形(今回は470×470pxで作成)を作成し中心に配置します。




次に、塗りにパターン(Oil Paint 2)を設定します。この時にパターンの大きさを変えられるので、古い紙のまだらなイメージに合うように拡大します。今回は下図くらい大きくしています。




そして、塗りのエッジ(エッジをぼかす:30px)、テクスチャ(紙やすり)に設定します。




↑そうするとこんな感じになります。

ここで、この矩形のブレンドモード(焼き込み(カラー))を設定すると下図のようになり出来上がりです。






とても簡単に作れました。
いかがでしょうか?

パターンやブレンドモードを変えたり、ノイズなんかも加えると、もっとそれっぽくなると思いますので、皆様、是非試してみてください。



と、これではちょっと寂しいので、
最後におまけです。

今回の作った古い紙の素材を使って
アメリカの古いポスターなイメージを作ってみました。
(女性の素材は、前回のブログで作ったものを流用しています。)



それでは、皆様、また次回です。

3ステップで写真を水彩画風にする方法(Fireworks)

こんにちは和田です。
今回は、3ステップ(30秒以内)で写真を水彩画風にする方法をお伝えいたします。
とっても簡単です。
↓こんな感じでになります。


ただ簡単な分、全体的に青みや緑みのある明るい画面で、背景がぼけている(被写界深度が浅い)ような写真限定です。


それでは、早速始めます。


1. まずファイルを開いて、元画像をコピー&ペーストしてください。





元画像の上にコピーを作成します。



2. フィルタの「明るさ・コントラスト」を適用


今回の画像では、明るさ98、コントラスト66に設定しました。
感覚としては、画面の明るい部分が白飛びしているくらいがいいと思います。




こんな感じで、白飛びさせます。



3.「2.」の画像のブレンドモードを『輝度』に設定して出来上がりです。








↓フィルターの「ぼかし(ガウス)」を若干掛けるとさらにそれっぽくなります。




たったこれだけです。いかがでしょうか?
とても簡単だと思います。


また、他の写真だとこんな感じになります。




そして、写真や「明るさ・コントラスト」の数値を変えると、アメリカの古いポスター風にもなります。面白いですね。
皆様も是非試してみてください。




最後に、
自分は、関東在住ですが、日々の余震、停電等、ストレスを感じる事が多くなっております。それを考えますと被災地の皆様のご心労やご苦労は想像を絶するのではないかと思います。
自分に出来る事は少ないですが、節電など、少しでも復興の助けとなることを心がけて行きたいと思います。
今回の大地震で被害を受けられました皆様、そしてそのご家族の皆様に心よりお見舞い申し上げます。
1日も早い復興を心よりお祈り申し上げます。

和田記光

Fireworksでハ○ーポッター風の”Happy New Year”を描いてみました(ザラザラした質感の鈍く光った鉄)

こんばんは。和田です。

皆さん。
あけましておめでとうございます。
本年もFireworksネタを出していこうと思いますので、どうかよろしくお願いいたします。

今回は、HP(ハ○ーポッター)風の”Happy New Year”を描いてみようと思います。
なぜ、HP(ハ○ーポッター)かというと、たまたま、ブログを書く前にHP(ハ○ーポッター)のサイトを見たからです。それだけです。失礼しました。


では、早速描いて行こうと思います。

HP(ハ○ーポッター)のロゴは、ちょっとザラザラした質感で鈍く光った鉄のようでしたので(ご興味のある方はサイトを見てください)、そんな感じで描いてみます。


今回も簡単に仕上げたいと思います。

1.まず始めに500px×400px、カンバス:黒(#000000)でファイルを作り”Happy New Year”を入力します。
※カンバス黒にするところが簡単に描くポイントです。




2.フォントに#EBEBEB〜#666666のグラデーションを下図のように設定します。







3.ロゴ風に立体感を出す為にベベルとエンボスを図のようにかけます。
(フィルターのPhotoshopライブエフェクトを使用)







4.鈍い鉄の質感を出す為に、「サテン(Photoshopライブエフェクト)」と「明るさ・コントラスト(フィルタ)」を図のようにかけます。










鈍い感じがだいぶんで出来ました。


5.ザラザラの質感を出すためノイズをかけた矩形をロゴの上に配置します。

5-1.今回は少し青っぽくしたかったので紺色(#161822)に設定します。




5-2.下記の値でノイズをかけます。







5-3.ノイズをかけた矩形にオーバーレイを設定してザラザラの質感にします。
オーバーレイは背景の黒には影響されないので、いちちマスクとかの設定をしなくてもオッケーです。





↓こんな感じです。




6.さて最後に、高級感?を出すため、茶系の矩形をロゴの上に配置して、オーバーレイを競ってします。






これで出来上がりです。

本家ハ○ーポッターのロゴと全く一緒じゃないですが、こんな感じで作成すると鈍い鉄の質感が簡単に作れます。

皆様もどうか試してみてください。

それでは、また次回です。

簡単に作るiBooks風の壁紙

こんにちは。和田です。

今回はiBooks風の壁紙を作成しようと思います。

今回も難しいことはいっさいしていませんし、木目のテクスチャも1枚しか使っていないので、簡単に出来ます。
どうか皆様もやってみてください。

↓出来上がりはこんなイメージです。


ではでは、

1.まず、テクスチャ(縦目)を用意します。
今回は、いいテクスチャが無かったので、とりあえずこれで作業します。
(木というよりは、ベニア板みたいな感じになりそうです。(泣))



2.上記で用意したテクスチャをコピーして90度回転して横目にします。
(これは、棚板の正面(側面?)部分に使うためです。



3.①棚板、②側板、③奥板を矩形ツールで書きます。



4.①−1棚板(正面)の作成
 ・棚板の正面の部分が一番明るいので、フィルターの「明るさコントラスト」で色を明るくしてください。


 ・「3」で作った棚板の正面部分の矩形オブジェクトを「線:なし、塗り:#FFFFFF、エッジ:エッジをぼかす:1px 」に設定して「2」で作成したテクスチャにマスクをかけます。
 「エッジをぼかす」を使用したのは、板の角の柔らかい感じを出すためです。

↑マスク未


↑マスク後


4.①-2棚板(上面)の作成
 ・「2」で作成したテクスチャを手前が広く、奥が小さくなるように変形します。(遠近感を出すためです)
 ・また、明るさも棚板の正面より暗くしてください。
 ・①−1と同じように矩形オブジェクトを「線:なし、塗り:#FFFFFF、エッジ:エッジをぼかす:1px 」に設定してマスクをかけます。
 ・そして、フィルターのPhotoshopライブエフェクトでドロップシャドウとシャドウ(内側)をかけます。
 


  シャドウ(内側)は棚板(上面)の濃淡(奥の方を暗い感じにするため)をつけるためです。

↑棚板の出来上がりです。


5.②側板は、「1」のテクスチャを遠近感を出して変形させます。棚板(上面)と同じ要領です。

↑マスク未状態です

 そして、フィルターのPhotoshopライブエフェクトでドロップシャドウとシャドウ(内側)を図の値でかけ、、反転してコピーして左側の側板を作ります。



 (棚板(上面)と同じ理由でかけています。ドロップシャドウは、側板、奥板の接しているところの陰用です。)

↑側板の出来上がりです。


6.奥板ですが、ここも側板同様一段ずつ作り、フィルターのPhotoshopライブエフェクトでシャドウ(内側)を図の値でかけます。
  これは、図のⅠ、Ⅱ、Ⅲ、Ⅳの部分を暗い感じにして、印象的な雰囲気を出すためです。
  (でも実際の棚は、ここまで暗い部分はないです。誇張です。)



↑こんな感じになります。


7.これで、1段ができたので、後はコピペで3段にします。




8.このままでもいいのですが、棚板の下にさらに陰を落とすと、より印象的な雰囲気にるのでドロップシャドウを実行します。



↑ドロップシャドウ未


↑ドロップシャドウ後
 どうでしょうか? 劇的に変化していませんが、より陰が強調されたかと思います。
 


↓で、出来上がるとこんな感じです。



↓そして、iPhoneに埋め込むとこんなイメージです。



今回も結局iPhoneネタだったので、次こそは他のネタにしようと思います。

それでは、また次回です。

Appleのサイトで見たiPhone4をFireworksで描いてみました-2/2

皆さま。こんにちは。和田でございます。

今回は、前回までに描いたiPhone4に、ちゃんとボタン類を付け加えようと思います。


ちなみにボタンはどれも、たった4個程度の矩形(オブジェクト)で作れます。しかもマテリアルの陰影などは、グラデーションとフィルタを使って表現するので簡単です☆
皆さまも作ってみてください☆

↓仕上がりイメージはこんな感じです。



iPhone平面版のボタン


まずは、前々回に作ったiPhone平面版(下図の青と赤で囲った部分)にボタンを追加します。


そして、
・121×24px(丸み30%)
・24×27px(丸み30%)
・24×64px(丸み60%)←2個
の矩形を図の位置に書きます。
そして、個々の矩形のグラデーションを「線形」にして
図のように色を設定してください。


また、ボタンの立体感を出すために「Photoshop ライブ効果」の「ベベルとエンボス」をかけます。
・スタイル:ベベル(内側)
・テクニック:スムーズ
・方向:アップ
・深さ:100
・サイズ:1
・ソフト:1
・角度:0
・ハイライト:0
・シャドウ:20
(詳しくは上図を参照してください)


最後に、作ったボタンの上にiPhoneの画像をかぶせて完成です。





iPhone立体版のボタン

さて、いよいよ立体版のボタン作成です。


まずはボタン類を平面に描きます。この時、絵とのアタリとなる四角も描いておくと変形しやすくなります。


次に、平面に描いたボタン類をiPhoneの絵に合うように変形します。
そして、この変形した矩形(オブジェクト)を元に各ボタンを描いていきます。


2.ヘッドフォンミニジャック

まずは、ヘッドホンミニジャックを作ります。


2-1.変形した矩形を#444444で「ベタ塗り」に設定

2-2.その矩形をコピーして若干縮小させ、上記のようなグラデーションを設定します。
□線形グラデーション
(1)#313131
(2)#292929
(3)#5E5E5E
(4)#BBBBBB
(5)#BBBBBB
(6)#3A3A3A

2-3."2-2"の矩形をコピーして縮小(図の程度)させ、上記のようなグラデーションを設定します。
□円錐グラデーション
(1)#121212
(2)#777777


2-4."2-2"の矩形をコピー、塗りをなし、線を#DBDBDB,2pxに設定

2-5.ミニジャックの横の穴の作成
□円形グラデーション
(1)#989898
(2)#171717

2-6.これでヘッドフォンミニジャックの出来上がり☆



3.オンオフボタン

これも矩形(オブジェクト)はたったの4つです。


3-1.変形した矩形を#333333で「ベタ塗り」、「2pxの線」を設定

3-2."3-1"の矩形をコピーして若干縮小、ボタンの天板になるところくらいまでに移動させ、上図のようなグラデーションを設定します。
□線形グラデーション
(1)#202020
(2)#D3D3D3

3-3.ボタンの側面の矩形は"3-1","3-2"の矩形をコピーして「パスを結合/型抜き」を実行して作成。そして上図のようなグラデーションを設定します。また、丸みを演出するためシャドウ(内側)も設定します。
□線形グラデーション
(1)#000000
(2)#D6D6D6
(3)#D6D6D6
(4)#000000
(5)#515151
(6)#2F2F2F
(7)#767676
(8)#000000
□シャドウ(内側)
・距離:2
・不透明度:100
・柔らかさ:1
・角度:42
・色:#000000

3-4.最後に、ボタンの天板と側面の境界がハッキリしすぎているので、"3-2"の矩形をコピーして背面にペースト。その矩形のエッジを「エッジをぼかす:2」に設定します。こんな感じで出来上がりです。



4.サウンドボタン

これも矩形(オブジェクト)は4つです。


4-1.変形した大きい矩形(オブジェクト)を#000000で「ベタ塗り」、「エッジをぼかす:2」に設定します。

4-2."4-1"の矩形をコピーして前面にペースト。#686868で「ベタ塗り」(エッジはぼかしません)に設定、更に凹んだイメージを出すために「Photoshop ライブ効果」の「ベベルとエンボス」をかけます。
Photoshopライブ効果
・スタイル:ベベル(内側)
・テクニック:スムーズ
・方向:ダウン
・深さ:150
・サイズ:4
・ソフト:4
・角度:-113
・ハイライト:0
・シャドウ:60

4-3.変形した小さい矩形(オブジェクト)をコピーしてボタンの天板の位置まで移動。そして上図のようにグラデーションを設定します。
□線形グラデーション
(1)#696969
(2)#D1D1D1
(3)#4A4A4A

4-4.ボタンの側面のオブジェクトを作成(「パスを結合/型抜き」)し、上図のようにグラデーションを設定します。また、丸みを演出するため「シャドウ(内側)」をかけます。
□線形グラデーション
(1)#313131
(2)#313131
(3)#F1F1F1
(4)#434343
(5)#898989
(6)#898989
(7)#252525
□シャドウ(内側)
・距離:3
・不透明度:60
・柔らかさ:1
・角度:134
・色:#FFFFFF


5.音量ボタン

これも矩形(オブジェクト)は4つです。「4」で作った方法とほとんど同じです。


5-1.変形した矩形(オブジェクト)を#000000で「ベタ塗り」、「エッジをぼかす:1」に設定します。

5-2."5-1"の矩形をコピーして前面にペースト。#686868で「ベタ塗り」(エッジはぼかしません)に設定、更に凹んだイメージを出すために「Photoshop ライブ効果」の「ベベルとエンボス」をかけます。
Photoshop ライブ効果
・スタイル:ベベル(内側)
・テクニック:スムーズ
・方向:ダウン
・深さ:150
・サイズ:4
・ソフト:4
・角度:-168
・ハイライト:0
・シャドウ:60
(詳しくは下図を参照してください)


5-3."5-2"の矩形(オブジェクト)をコピーしてボタンの天板の位置まで移動。そして上図のようにグラデーションを設定します。
(1)#CDCDCD
(2)#717171
(3)#1A1A1A

5-4.ボタンの側面のオブジェクトを作成(「パスを結合/型抜き」)し、上図のようにグラデーションを設定します。また、丸みを演出するため「シャドウ(内側)」をかけます。
□線形グラデーション
(1)#0B0B0B
(2)#9A9A9A
(3)#505050
(4)#505050
(5)#9A9A9A
(6)#9A9A9A
(7)#505050
(8)#9A9A9A
(9)#9A9A9A
(10)#0B0B0B
□シャドウ(内側)
・距離:3
・不透明度:70
・柔らかさ:0
・角度:153
・色:#FFFFFF


と、これで出来上がりです。



どうでしょうか?
Fireworksの機能だけでこれだけ描けます。
結構描けますよね!?

なので、皆さまも何か描いてみたいものがありましたら、是非Fireworksを使って描いてみてください。簡単ですよ☆

それでは、また次回で~す。

って、次は何描こうかな……。

Appleのサイトで見たiPhone4をFireworksで描いてみました-1/2

皆さまこんにちは。アシアルの和田です。

今日は、前々回に引き続き、FireworksでiPhone4を作成してみました。
今回はAppleのサイトにあったiPhone4(斜めから見た)をお手本にしています。

ただ、今回はちょっと長くなりそうなので、ボタン部分は次回に作りたいと思います。
なので、今日はボタンなしのiPhone4の斜め版です。
(ちょっと変ですかね!?)


では、まずはじめに
700×700pxのキャンバスを作ります。



ステップ-1 iPhone4をトレース
正面から見たiPhoneをトレースします。
その際、トレースしたオブジェクトの線を赤や青など、目立つ色で描くと分かりやすくなります。(下のイメージです)



ステップ-2 斜めから見たイメージに変形
Appleのサイトに掲載されていた斜めからのアングルにするために、ステップ-1で作成したオブジェクト全てを一括して「変形ツール」で変形します。
また、奥行き間が出るように、変形したオブジェクトを数ピクセル動かしたりして微調整します。



ステップ-3-1 ステンレスバンドを作成
トレースした一番外側のオブジェクトを下図のように下側にコピーします。
そして、遠近感がでるようにコピーしたオブジェクトの左右のコーナーを微調整します。



そして、こんな感じに、2つのオブジェクトを結合します。
ちなみに、バンドの切れ目の線(ペンツールで作ったオブジェクト)も描いておきます。
実際に、黒いオブジェクトをのせるだけでステンレスバンドの切れ目を表現できます。
(結合方法は、ナイフツールでオブジェクトをカットして、ペンツールで結合です。)



ステップ-4 ステンレスバンドを着色
出来上がったステンレスバンドを下記のようにグラデーションを設定します。
・線形グラデーション:#000000→#AFAFAF→#AFAFAF→#000000



次に、真ん中のコーナー部分の鉄っぽいハイライト(グラデーション)をつけます。
3つのオブジェクトを矩形ツールで作成し「エッジをぼかす」を適用します。

・ベタ塗り:#000000 エッジをぼかす(10px) 透明度100%
・ベタ塗り:#FFFFFF エッジをぼかす(15px) 透明度80%
・ベタ塗り:#000000 エッジをぼかす(15px) 透明度100%





ステップ-3-2 ステンレスバンドの角を表現
ここで、ステンレスバンドの角を表現します。
方法は、ステンレスバンドと隣接したオブジェクトを白でベタ塗り、エッジをぼかすを1pxに設定します。
・ベタ塗り:#FFFFFF エッジをぼかす(1px)



ステップ-3-3 ステンレスバンドの側面を表現
次に、ステンレスバンドの側面(iPhoneを正面から見たときに見える面)を演出するために、先ほど作ったオブジェクトをコピーして、左と上に数ピクセルずらし、グレーのグラデーションをかけます。
・線形グラデーション:#474747→#666666→#474747 エッジをぼかす(2px)



ステップ-3-4 ステンレスバンドとプラスチック部分との境界を表現
先ほど作ったグレーのグラデーションをコピー&ペースト。若干縮小(数ピクセル程度)して、手前の下図のように配置します。
こうすることで、ステンレスバンドと黒い部分との境界を表現します。
・ベタ塗り:#0000003 エッジをぼかす(1px)



ステップ-4 iPhoneのプラスチック部分(黒い部分)の作成
これは、iPhoneの上面(画面などがある部分)の作成です。
先ほど作った黒いオブジェクトを更にコピー&ペースト
縮小して下記のように配置してください。(さっきと同じように手前側の隙間を大きく取ります)



そしてこのオブジェクトに、
フィルタ/Photoshopライブ効果/べべルとエンボスを下記の設定で適用します。




そうするとこんな感じです。
大分、それっぽくなってきました。



ステップ-5 iPhoneのパーツ(スピーカー、カメラ、マイク)の作成
こちらについては、前回のブログとほぼ同じ方法で描いていますので、今回は省略します。
ご興味のある方は「iPhone4をFireworksで作ってみました」を参照して下さい。




ステップ-6 ハイライトの作成
iPhoneのハイライト部分を作成するために、下記のように赤い線のオブジェクトを作成。そしてステップ-5で作成した黒いオブジェクトをコピーして、赤い線のオブジェクトと
変更/パスを結合/交差をして作成します。
こんな感じです。



そして、白の不透明から透明へのグラデーションを設定します。
こちらも、以前のブログにて紹介しておりますので、今回は省略します。
例によって(スパイ大作戦みたいですね…古い?)
ご興味のある方は「iPhone4をFireworksで作ってみました」を参照して下さい。



ハイライトを上と左方向に数ピクセル移動します。(
Appleのサイトの画像はこんな感じになっていたので)




そして、背景を黒にしたら出来上がりです…。


といいつつ、ボタン類は次回に持越しです。


それではまたでございます。

iPhone4をFireworksで作ってみました

こんにちは。和田です。

先日、iPhone4が発売になりましたね。
欲しいな…なんて思っているのですが、ド○モユーザーな自分には無理なんですよね。はぁ~。
はやく、SIMフリーの環境になってくれないかな…。

なんて気持ちをこめて!

じゃなかった、
今後、iPhoneアプリの提案にも使えると思い、FireworksでiPhone4を作ってみました。

ステップ-1~10にまとめたので、皆さんも作ってみてくださいね。
↓出来上がりはこんな感じです。




まず1200×1600pixelのキャンバスを作ります。

ステップ-1 :ステンレススチールバンド(外枠)を作る
矩形ツールで750×1472pixel(x=225,y=64)の長方形を作り、
・丸み:28%、
・線形グラデーション:#8c8c8c,#cccccc,#8c8c8c
・光彩(内側):距離→2,不透明度→50%,ぼかし→1,オフセット→0
に設定します。
光彩(内側)は、少し丸みを出すために設定しています。



ステップ-2:ステンレススチールバンド(平らな部分)を作る
矩形ツールで742×1464pixel(x=229,y=68…ステップ-1の画像の中心に配置)の長方形を作り、
・丸み:27%、
・線形グラデーション:#e1e1e1,#e0e0e0,#e1e1e1
・光彩(内側):距離→2,透明度→30%,ぼかし→0,オフセット→0
に設定します。
光彩は、ハイライトを出すために設定しています。



ステップ-3:ステンレススチールバンドの継ぎ目を作る
矩形ツールで(1)742×6pixel(x=229,y=1358),(2)6×742pixel(x=470,y=68)の2つの長方形を作り、図のとおり配置します。
ステップ-2で作成した矩形の端に合わせています。



ステップ-4:ステンレススチールバンドをザラザラにする
ステップ-1で作った矩形をコピーし最善面にペースト。
フィルタ>ノイズで適用量を20にしてOK。

このレイヤーの
ブレンドモード:乗算
・不透明度:10%
に設定して、ザラッとした質感を演出します。



ステップ-5:黒い筐体のベースを作成
(1)矩形ツールで736×1456pixel(x=233,y=72)の長方形を作り、
・丸み:27%、
・塗り:#000000
に設定する。

(2) (1)で作った矩形の上に726×1448pixelの長方形を作り
・丸み:27%、
・線形グラデーション:#000000,#101010
Photoshopライブ効果(べべルとエンボス)の効果を下図のように設定する。


Photoshopライブ効果(べべルとエンボス)の効果がこちら



ステップ-6:ホームボタンの作成
矩形ツールで142×142pixel(x=530,y=134)の円を作り、図のようなグラデーションを作ります。
そして
・円形グラデーション:#060606,#4d4d4d
・エッジをぼかす:2
(ボタンの境界がハッキリしすぎていると不自然なのでぼかしています)
・光彩:距離→1,不透明度→40%,ぼかし→1,オフセット→0,#000000
(実際にはボタンと境界には隙間があるので、それをここで表現しています)



ステップ-7:スピーカーの作成
矩形ツールで120×14pixelの長方形を作り、
・塗り:#808080
・テクスチャ:網目1→30%
(メッシュをイメージしています)
・光彩(内側):距離→4,不透明度→65%,ぼかし→4,オフセット→0,#000000
(メッシュの雰囲気を出すため少し盛り上がったイメージにしています。本物は平らな感じです)



ステップ-8:カメラの作成
(1)矩形ツールで38×38pixel(x=457,y=180)の円を作り、
・円形グラデーション:#161817,#4A4947
・エッジをぼかす:1(境界がハッキリしすぎていると不自然なので)
(2)その上に、16×16pixel(x=468,y=191)の円を作り、
・塗り:#093675
・光彩(内側):距離→4,不透明度→65%,ぼかし→4,オフセット→0,#000000



ステップ-9:画面の作成
(1)矩形ツールで654×974pixel(x=273,y=313,丸み:2,塗り:#000000)の長方形を作ります(液晶の枠?)
(2)お好みの画像とインターフェース配置


(3)その上にマスク用の長方形(640×960pixel(x=280,y=320,塗り:#000000))を作り、(2)の画像をマスク


(4)マスクした画像に
・シャドウ(内側):距離→8,不透明度→65%,ぼかし→16,角度→315
を設定して、雰囲気を出します。
実際はこんな風には見えないんですが、こうすることで、画面っぽく見えてきます。



ステップ-10:ハイライトの作成
(1)図のようにハイライトとなる三角形を大きめに描きます。


(2)図-5の(2)で作った矩形をコピーして(1)三角形の上に貼り付けます。
(3) (1)と(2)の図を同時に選択して変更(M)>パスの結合(O)>交差(I)をしてハイライト画像を切り抜きます。


(4)切り抜いて出来た画像を
・線形グラデーション:#FFFFFF(100%),#FFFFFF(0%)
・レイヤーの不透明度:50%
に設定して図のような範囲でグラデーションをかけます。



これで、出来上がりです。



今回は正面しか作りませんでしたが、次回は斜めとかいろいろと作りたいと思います。

それでは、また次回です。