October 17, 2010
壁紙をフォトショップで作成-7。( 表示位置の起点の調整 )
フォトショップで壁紙を作成する方法-7 です。
( 表示位置の起点の調整 )
- - -
アロ〜ハ!
水着のショップ作成記録の
sea-wind.netです。
ダイブとご無沙汰でした。
さて、フォトショップ壁紙の続き7回目です。
- - -
今回は壁紙の表示位置の起点の調整です。
前回でベースのファイルが出来ましたので、
そろそろ仕上げになってきました。
これまでの単純作業は、
上のバーの「ウインドウ」-「アクション」などを使って
単純化出来る部分も有りましたが、
ココからは
感覚的なクリエーティブ作業に入っていきます。
その為、
今回の表示位置の起点の調整
次回のキャラクターの位置の調整を、
組合わせ繰り返して、
あなたの、イメージ通りの壁紙を完成させて下さい。
重複部分も有りますが、
先ずは、壁紙の表示位置を決めて見ます。
- - -
壁紙をどの位置に、
どの大きさで使うかにもよりますが、
(例:
全体のバックグランド
テーブルのバックグランド
セルのバックグランド ) 他。
いずれにしても、壁紙は通常では、
「 左の上 」が起点になり、
そこから、右に繰り返したり、下に繰り返したりする場合が
ほとんどだと思います。
ここでもベーシックに、
「 左の上 」を起点と考え、
壁紙の表示される位置を調整します。
最適化部分(一番良いと思った場所)を決めます。
- - -
ふり返ると
最初に決めた壁紙サイズは
X : Yが 150 × 150pixでした。
4こ のキャラクター各1このレイヤーなので
4こ のレイヤー。
(+背景いれ5レイヤー)
それを拡大展開し、下と右に各2つづつ並べ
前回は、
X : Yが 300pix : 300pix
16こ のキャラクターの、各1このレイヤーなので
16こ のレイヤーでした。
(+背景もいれ17レイヤー)に、しました。
その中で表示位置にフィットする壁紙を
今回は、抜き出します。
X : Yが 300pix : 300pix の中から、
150 × 150pixの 位置決めです。
- - -
4つのキャラクター画像と背景×4
1)sea-wind.net のロゴ
2)35pixの正円 ( 濃い )
3)45pixの正円 ( 薄い )
4)65pixの正円 ( 中間 )
- - - - -
最初に決めた壁紙サイズは
X : Yが 150 × 150pixでした。
4こ のキャラクターの、4こ のレイヤー。
(+背景もいれ5レイヤー)
それを拡大展開し、
前回は、
X : Yが 300pix : 300pix
16こ のキャラクターの、16こ のレイヤーでした。
(+背景もいれ17レイヤー)にまでしました。
大枠で壁紙になった状態(展開後のイメージ)が、
分かる様になったと思います。
- - -
その中で表示位置にフィットする壁紙を
今回は、抜き出します。
X : Yが 300pix : 300pixの中から、
150 × 150pixの 位置決めです。
極論、150 × 150pixなら、切りぬきの位置は
どこでもOK。
- - -
(この上の画像では、さらに左側にSEA-WIND.NETの文字を
上下2レイヤー加え、150pix左に移動させてます。
(前回の壁紙6の所の赤枠から出た文字の部分)
その為、文字最後のNETのETの部分だけ見えています。)
- - -
使用用途や、使用位置の大きさにより
位置決めには様々な答えが有ると思いますが、
ここでは、仮に、
☆
1)SEA-WIND.NETの文字が左側で切れない位置を
左の位置に (文字頭を一番左に)
☆
2)上の位置は全て背景色( 上の場合は白 )で
始まる位置
として
切りぬきの
決定位置を決めました。( 赤枠部分 )
- - -
その他、例えば
☆
3)SEA-WIND.NETの文字の
右上最後のTの文字を一番上にしたい場合は、
赤枠を、上にずらし、いい位置を決めます。
これら以外にも、画像により様々な位置の
決め方が有ると思いますので、試してみて下さい。
7・表示位置の起点の調整
( 赤枠の部分が最初作成した画像 )
○●○●○●○●○○●○●○●○●○○●○●○●○●○
○●○●○●○●○
注、今回の、サンプル図形について。
: hahaha~
グランド色を白で作ってしまったので、
ブログ記事の背景色と同じだ〜! ピンチ !
と言うことで、
一先ず、
ブログの段落を水色の背景にして見えやすいようにしました。
中の「 白い所のみ 」 見て下さい〜!
ゴメンネ !! (;´▽`A``
!(´Д`;)
また、壁紙の背景の色の調整は、
最後の方で、項目にします。
○●○●○●○●○
○●○●○●○●○○●○●○●○●○○●○●○●○●○
Photoshopの作業は以下 どぅえ〜す。 ↓ ↓ ↓ -Photoshop
今回もフォトショップの作業をレイヤーで振り返ります。
- - -
1) ところが、
しかし、今回は、
起点の位置を調整する
という記事なので、
特にレイヤーは
関係なかったでした〜。
が、
このblog用には
壁紙の範囲指定位置を
解り易いように
赤枠で表示した為、
右の様に150pixの赤枠を
最初の左上のレイヤー時に
作っておきました。
しかし、通常作業では、
ツールボックスの中の
長方形選択ツールで
情報ボックスを見ながら
150pix × 150pixを
範囲指定して、
それを動かしながら
位置決めすればよいので、
特に、右のレイヤーボックスの
上2つのレイヤーは不要です。
↓ ↓ ↓
と、いう事で、
範囲指定で
イメージを。
2)良い位置があれば
「選択範囲の保存」。
切りぬくか
又は、選択範囲全てを
「結合部分をコピー」
新規ファイルに
ペーストして
先ずは元図の完成。
- - -
○●○●○●○●○○●○●○●○●○○●○●○●○●○
○●○●○●○●○
今回は表示位置の起点の調整
イメージ通りの
位置を範囲指定。でした。
- - -
次回は、
もし、気にいる位置が無かった場合や、
若干、キャラクターを移動させたい時などの
「 キャラクターの位置の調整 」 補正かな?かな?
と言う事で、
また、次回で〜す。
チャオ!
*******************************
以前、出した
参照:製品やお買い物方法の水着ショップ ご案内ページに
http://www.f-j-r.com/infor.htm
使用中の水着通販サイトの壁紙。
も、パイナップルの缶には、
だいぶ時間をかけましたが、
(当時はPhotoshopの4.0Jだったので、
工程数が多く、結構大変でした。
今なら、もっと簡単だと思いますが・・・)
又、
左下のヤシの木らしきキャラクターは、
結構アバウトで、配置の関係で、入れました。
フォントの文字型に関しては、
元々PCやフォトショップや
イラストレーターに入っているフォントを加工していってもいいし、
市売でも色々なフォントが売られているので
探してみて下さい。
面白い物も結構あります。
でも遊び過ぎのフォント文字は、
既に、それで完成されていて、
買う時は喜んで買うのですが
後から、あまり加工できないので、
結局、使わない事が多かったです。
○●○●○●○●○
○●○●○●○●○○●○●○●○●○○●○●○●○●○
と、言うことで、
今回は
壁紙の作成方法-6。( 2:元画像の拡大展開 )
でした。
では、また。