壁紙- 配置

January 31, 2011

壁紙をフォトショップで作成-8。( キャラクターの位置調整 )

フォトショップで壁紙を作成する方法-8 です。
( 表示位置の起点の調整 )

- - -

アロ〜ハ!
水着のショップ作成記録の
sea-wind.netです。

何回かあいてしまいましたが、
フォトショップ壁紙の続き8回目です。

- - -


今回は壁紙のキャラクターの位置修正です。
前回で、表示位置の起点の調整記載いたしましたが、
(表示する時、全体画像の左上位置を決めた)


ここでは、
最終の、個々の、キャラクターの位置調整です。

これも前回同様、
感覚的なクリエーティブ作業なので、
ご自分なりのバランス感が決めてかな?

今回作成している壁紙など
1パターンの連続柄は比較的、柄くせが出やすいですが、
そうかと言って、
あまりに機械的にバランスをとると、
面白くなくなることも多いので、
難しい所です。


又、場合によっては、
キャラクターを減らしたり加えたりする事も
あるかもしれません。

前回分と合わせ、
ここまでくれば、
あなたのアイデア、イマジネーション次第。

それと、
特に、各キャラクター位置に問題が無ければ、
この項目はスキップして下さい。


- - - - -


それではフォトショップにもどり

X : Yが 300pix : 300pix の時、

(ここでは文字は文字で4つのレイヤーをリンク)
(大玉は大玉で4つつのレイヤーをリンク)
(中玉は中玉で4つつのレイヤーをリンク)
(小玉は小玉で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)にまでしました。

大枠で壁紙になった状態(展開後のイメージ)が、
分かる様になったので、バランス良く
各キャラクターを配置
今回は最終修正。

- - -

ka005

- - -

◎ 修正方法 ◎

前回で、思うような、位置が無い場合。
各キャラクターの位置が気になる場合。
柄くせが出てしまい気になる場合。
などは、
各キャラクターを移動調整します。


1)キャラクターごとにレイヤーをリンク。
(ここでは文字は文字で4つをリンク)
(大玉は大玉で4つをリンク)
(中玉は中玉で4つをリンク)
(小玉は小玉で4つをリンク)

2)そして移動。


*** 仮に上の大玉を右にずらすと、
外へ出てしまい事実上は、
左から、大玉が出てこないと、いけないので、
左の大玉をレイヤーコピーし
150pix X軸の左に移動しないといけませんが、
面倒なので私はあまりやりません。

大玉を右にだけ移動し、
イメージのみつかみ、
決定する150 × 150pixの壁紙の位置は
この場合、なるべく右の全キャラクターが
入っている位置でピックします。

- - -


8・キャラクターの位置調整


( 赤枠の部分が最初作成した画像 )

 

○●○●○●○●○○●○●○●○●○○●○●○●○●○
○●○●○●○●○

 注、今回の、サンプル図形について。

 : hahaha~ 
グランド色を白で作ってしまったので、
ブログ記事の背景色と同じだ〜! ピンチ !

と言うことで、
一先ず、
ブログの段落を水色の背景にして見えやすいようにしました。
中の「 白い所のみ 」 見て下さい〜!

ゴメンネ !!  (;´▽`A``


!(´Д`;)

また、壁紙の背景の色の調整は、
最後の方で、項目にします。

○●○●○●○●○
○●○●○●○●○○●○●○●○●○○●○●○●○●○


Photoshopの作業は以下 どぅえ〜す。 ↓ ↓ ↓ -Photoshop



☆;+;。・゚・。;+;☆;+;。・゚・。;+; 

『 壁紙をフォトショップで作成-8。( キャラクターの位置調整 ) 』 の全文読む ≫


seawindnet at 11:32|│Comments(0)TrackBack(0)

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。

- - -

ka005
(この上の画像では、さらに左側にSEA-WIND.NETの文字を
上下2レイヤー加え、150pix左に移動させてます。
(前回の壁紙6の所の赤枠から出た文字の部分)
その為、文字最後のNETのETの部分だけ見えています。)

- - -

使用用途や、使用位置の大きさにより
位置決めには様々な答えが有ると思いますが、

ここでは、仮に、


1)SEA-WIND.NETの文字が左側で切れない位置を
左の位置に (文字頭を一番左に)


2)上の位置は全て背景色( 上の場合は白 )で
始まる位置


として

切りぬきの
決定位置を決めました。( 赤枠部分 )

- - -

その他、例えば


3)SEA-WIND.NETの文字の
右上最後のTの文字を一番上にしたい場合は、
赤枠を、上にずらし、いい位置を決めます。


これら以外にも、画像により様々な位置の
決め方が有ると思いますので、試してみて下さい。


7・表示位置の起点の調整
( 赤枠の部分が最初作成した画像 )





○●○●○●○●○○●○●○●○●○○●○●○●○●○
○●○●○●○●○


 注、今回の、サンプル図形について。

 : hahaha~ 
グランド色を白で作ってしまったので、
ブログ記事の背景色と同じだ〜! ピンチ !


と言うことで、

一先ず、
ブログの段落を水色の背景にして見えやすいようにしました。
中の「 白い所のみ 」 見て下さい〜!

ゴメンネ !!  (;´▽`A``

!(´Д`;)


また、壁紙の背景の色の調整は、
最後の方で、項目にします。


○●○●○●○●○
○●○●○●○●○○●○●○●○●○○●○●○●○●○


Photoshopの作業は以下 どぅえ〜す。 ↓ ↓ ↓ -Photoshop






『 壁紙をフォトショップで作成-7。( 表示位置の起点の調整 ) 』 の全文読む ≫


seawindnet at 12:18|│Comments(0)TrackBack(0)

June 18, 2010

壁紙をフォトショップで作成-6。( 2:元画像の拡大展開 )

フォトショップで壁紙を作成する方法-6です。
( キャラクター画像の拡大展開 )

- - -

アロ〜ハ!
水着のショップ作成記録の
sea-wind.netです。

- - -

壁紙画像の拡大展開-2。

今回も前回の続き。

前回右横に展開し
フォトショップ画像の
X : Yが 300pix : 150pix
になりました。

前回、4つのキャラクター ( 4つのレイヤー ) を複製し
8つのキャラクター ( 8つのレイヤー ) になりました。
(+背景も入れレイヤー9こ)

左側の4つをA組。 右がB組 みたいになりました。



で、今回はそれを下に展開し。
X : Yが 300pix : 300pix

8つのキャラクターの、8つのレイヤーを
16こ のキャラクターの、16こ のレイヤーにします。
(+背景で17)



最初に決めたサイズは150 × 150pixでした。
前回、300pix : 150pix
で、今回は300pix : 300pix

同じキャラクターを複製し下に展開。

(300pix × 300pixに。)

‐‐- - - -


展開後のの4つのキャラクター画像と背景

1)sea-wind.net のロゴ
2)35pixの正円 ( 濃い )
3)45pixの正円 ( 薄い )
4)65pixの正円 ( 中間 )

◎150 × 150pix の白背景。を
300pix × 150pixに右拡大後
各、キャラクターをx軸方向に、+150pixづつ右移動

元画像の各キャラクターをレイヤー複製。
レイヤー複製分を150pix下に移動し
300pix × 300pixに拡大しました。
8つのキャラクターが16に
各、キャラクターをy軸方向に、+150pixづつ右移動


ka004


6・元画像の拡大2。

( 赤枠の部分が最初作成した画像 )

 

○●○●○●○●○○●○●○●○●○○●○●○●○●○
○●○●○●○●○

 注、今回の、サンプル図形について。

 : hahaha~ 
グランド色を白で作ってしまったので、
ブログ記事の背景色と同じだ〜! ピンチ !

と言うことで、
一先ず、
ブログの段落を水色の背景にして見えやすいようにしました。
中の「 白い所のみ 」 見て下さい〜!

ゴメンネ !!  (;´▽`A``


!(´Д`;)

また、壁紙の背景の色の調整は、
最後の方で、項目にします。

○●○●○●○●○
○●○●○●○●○○●○●○●○●○○●○●○●○●○



Photoshopの作業は以下 どぅえ〜す。 ↓ ↓ ↓ -Photoshop

 

『 壁紙をフォトショップで作成-6。( 2:元画像の拡大展開 ) 』 の全文読む ≫


seawindnet at 21:11|│Comments(0)TrackBack(0)

May 03, 2010

壁紙をPhotoshopで作成-5。( 1:元画像の拡大展開 )

Photoshopで壁紙を作成する方法-5です。
( キャラクター画像の展開 )

- - -

アロ〜ハ!
水着のショップ作成記録の
sea-wind.netです。

- - -

今回は、壁紙画像の拡大展開。

前回のラッピングは、1つのキャラクター(ロゴ)のみの展開でしたが、
複数の画像が入り組んだ状態になる場合や
配置の選択の自由度を増す場合は、
判りやすい様に、
背景サイズを拡大展開し
ドットとロゴの全体のイメージを確認しながら
配置してみます。


最初に決めたサイズは150 × 150pixでした。
今回は、左側に同じ壁紙を複製し加えます。
(300pix × 150pixに。)


‐‐- - - -


展開後のの4つのキャラクター画像と背景

1)sea-wind.net のロゴ
2)35pixの正円 ( 濃い )
3)45pixの正円 ( 薄い )
4)65pixの正円 ( 中間 )

◎150 × 150pix の白背景。を
300pix × 150pixに右に拡大し
元画像の各キャラクターをレイヤー複製。
レイヤー複製分を150pix右に移動しました。
4つのキャラクターが8つに

ka003


5・元画像の拡大。

( 赤枠の部分が最初作成した画像 )

 

○●○●○●○●○○●○●○●○●○○●○●○●○●○
○●○●○●○●○

 注、今回の、サンプル図形について。

 : hahaha~ 
グランド色を白で作ってしまったので、
ブログ記事の背景色と同じだ〜! ピンチ !

と言うことで、
一先ず、
ブログの段落を水色の背景にして見えやすいようにしました。
中の「 白い所のみ 」 見て下さい〜!

ゴメンネ !!  (;´▽`A``


!(´Д`;)

また、壁紙の背景の色の調整は、
最後の方で、項目にします。

○●○●○●○●○
○●○●○●○●○○●○●○●○●○○●○●○●○●○



Photoshopの作業は以下 どぅえ〜す。 ↓ ↓ ↓ -Photoshop

 

『 壁紙をPhotoshopで作成-5。( 1:元画像の拡大展開 ) 』 の全文読む ≫


seawindnet at 10:53|│Comments(0)TrackBack(0)

March 22, 2010

壁紙をPhotoshopで作成-4。( 画像の展開 1 )

Photoshopで壁紙を作成する方法-4です。
( キャラクター画像の展開 )

- - -

アロ〜ハ!
水着のショップ作成記録の
sea-wind.netです。

- - -

今回は、キャラクター画像の展開。

前回とりあえず配置してみた画像のなかで
背景に入らなかったsea-wind.net ロゴを
最左側に、ラッピングしてみます。

壁紙のPhotoshopで指定した背景のサイズは?
最初に決めたサイズは150 × 150pix の背景でした。

そこで、壁紙完成時には、
150pixごとに同じキャラクターが出てくるようになりますので、
先ずは、sea-wind.net ロゴを
背景から出てしまった逆の方向に展開。
(NETのETのロゴ部分が左に加わりました。)


‐‐- - - -


以下の4つのキャラクター画像と
背景を用意しました。

1)sea-wind.net のロゴ
2)35pixの正円 ( 濃い )
3)45pixの正円 ( 薄い )
4)65pixの正円 ( 中間 )

◎150 × 150pix の白背景。


ka002

4・キャラクター画像の位置の展開。

ここでは、背景から、右側に出てしまったsea-wind.netロゴを
最左側に、ラッピング。

 

○●○●○●○●○○●○●○●○●○○●○●○●○●○
○●○●○●○●○

 注、今回の、サンプル図形について。

 : hahaha~ 
グランド色を白で作ってしまったので、
ブログ記事の背景色と同じだ〜! ピンチ !

と言うことで、
一先ず、
ブログの段落を水色の背景にして見えやすいようにしました。
中の「 白い所のみ 」 見て下さい〜!

ゴメンネ !!  (;´▽`A``


!(´Д`;)

また、壁紙の背景の色の調整は、
最後の方で、項目にします。

○●○●○●○●○
○●○●○●○●○○●○●○●○●○○●○●○●○●○



Photoshopの作業は以下 どぅえ〜す。 ↓ ↓ ↓ -Photoshop

 

『 壁紙をPhotoshopで作成-4。( 画像の展開 1 ) 』 の全文読む ≫


seawindnet at 15:10|│Comments(0)TrackBack(0)

February 04, 2010

Photoshopで壁紙の作成-3。( 画像の配置 )

Photoshopで壁紙を作成する方法-3です。
( キャラクター画像の配置 )

- - -

アロ〜ハ!
水着のショップ作成記録の
sea-wind.netです。

- - -

今回は、キャラクターを配置します。

とりあえず、
今回は、図形が、重ならない形で、配置してみます。


前回フォトショップで壁紙の作成する方法-2は、
背景サイズ内にキャラクターを集めました。

今回の、sea-wind.net ロゴの様に、文字図形が長い場合など
回転が必要な場合は、
「自由変形」等で角度を入れ回転させます。

(この所で、ロゴ右側が、背景の範囲を出ています、
下図で、出ている「NET」文字部分を、
最左側に、ラッピングしても大丈夫な様に配置します。

 (*フォントの長さなど詳しくは次回に) 

あと、今回、キャラクターを水玉にしたので、
水玉画像の回転はあまり関係なかったですが、
他の各キャラクターの場合は、必要に応じて、回転を・・・


以下の4つのキャラクター画像と
背景を用意しました。

1)sea-wind.net のロゴ
2)35pixの正円 ( 濃い )
3)45pixの正円 ( 薄い )
4)65pixの正円 ( 中間 )

◎150 × 150pix の白背景。




3・キャラクターの配置をします。

ここでは、各キャラクター図形が、重ならない様にしました。

 

○●○●○●○●○○●○●○●○●○○●○●○●○●○
○●○●○●○●○

 注、今回の、サンプル図形について。

 : hahaha~ 今、気が付いたら
グランド色を白で作ってしまったので、
ブログ記事の背景色と同じだ〜! ピンチ !

と言うことで、
一先ず、
ブログの段落を水色の背景にして見えやすいようにしました。
中の「 白い所のみ 」 見て下さい〜!

ゴメンネ !!  (;´▽`A``


!(´Д`;)

また、バック(背景)の色の調整は、
最後の方で、項目にします。

○●○●○●○●○
○●○●○●○●○○●○●○●○●○○●○●○●○●○



Photoshopの作業は以下 どぅえ〜す。 ↓ ↓ ↓ -Photoshop

 

『 Photoshopで壁紙の作成-3。( 画像の配置 ) 』 の全文読む ≫


seawindnet at 09:27|│Comments(0)TrackBack(0)

December 27, 2009

フォトショップで壁紙を作る-1-2の テクニックのフォロー編 -(失敗談!)

フォトショップで壁紙の作成する方法-1の
テクニックのフォロー編です。
( 壁紙を作る前の準備-失敗談。)

- - -

 Alo〜ha!
水着のショップ作成記録
sea-wind.netです。

- - -

前回、前々回のフォトショップでの壁紙作成の中で
書き忘れていたことが有りました。

それは、壁紙の場合、

≪ 使用するサイズで、作成する ≫

です。

どういうことかと言うと、

『 フォトショップで壁紙を作る-1-2の テクニックのフォロー編 -(失敗談!) 』 の全文読む ≫


seawindnet at 19:36|│Comments(0)TrackBack(0)

December 21, 2009

壁紙の作成方法-2。(前準備・キャラクター)

フォトショップで壁紙を作成する方法-2です。
( 壁紙を作る前の準備-キャラクターを集める。)

- - -

アロ〜ハ!
水着のショップ作成記録の
sea-wind.netです。

- - -

前回
フォトショップで壁紙の作成する方法-1は、
背景の大きさを指定しましたが、
今回は、キャラクターを集めます。

勿論、イラストレーターから出し入れしてもいいし
フォトショップで作ってもいいし
ま〜、キャラクターは、
サイトによって個々、違いが大きいと思いますので
作って頂くとして、
ここでは簡単に 「 水玉 ( Dot )」 を使用する事にしました。


以下の4つのキャラクター画像と
背景を用意しました。

1)sea-wind.net のロゴ
2)35pixの正円 ( 濃い )
3)45pixの正円 ( 薄い )
4)65pixの正円 ( 中間 )

◎150 × 150pix の白背景。

ka000


今回使う画像のキャラクターを
最終的に作る画像サイズの中に取敢えず置きました
(ここでは重なっててもOK。)



○●○●○●○●○○●○●○●○●○○●○●○●○●○
○●○●○●○●○

 PS : hahaha~ 今、気が付いたら
グランド色を白で作ってしまったので、
ブログ記事の背景色と同じだ〜! ピンチ !
と言うことで、
一先ず、
ブログの段落を水色の背景にして見えやすいようにしました。
中の白い所のみ見て下さい〜。

○●○●○●○●○
○●○●○●○●○○●○●○●○●○○●○●○●○●○


フォトショップの作業は以下。 ↓ ↓ ↓ -Photoshop



『 壁紙の作成方法-2。(前準備・キャラクター) 』 の全文読む ≫


seawindnet at 12:33|│Comments(0)TrackBack(0)

December 20, 2009

壁紙を作成-1。-(作成前の準備・背景)

フォトショップで壁紙の作成する方法 1です。
( 壁紙を作る前の準備-背景の事を記載します。)

- - -

アロ〜ハ!
水着のショップ作成記録の
sea-wind.netです。

- - -

壁紙を作るに当たって
壁紙の大きさを

◎150 × 150pix の白背景。
にしました。

背景の広さ

○●○●○●○●○○●○●○●○●○○●○●○●○●○
○●○●○●○●○

 PS : これは、特に何pixと いった決まりは無いです。
壁紙の大きさは勿論自由。
 私が思う注意点は画像が多いサイト、cgi、java、phpほか、
ブログだとやたら重いブログパーツとか・・・
ページの表示に負荷が多くなるであろうサイトへの使用目的では、
表示時間面で、極力、小さい方が良い気がしてます。

 文字のみのhtmlサイトならば多少大きくても、
一つくらいは、表示時間面は問題ないと思いますが・・・
 私は1ページの重さが150kb位を目標にしてます。
(それ以上重くなる場合は、又、別の項目で・・・)


○●○●○●○●○
○●○●○●○●○○●○●○●○●○○●○●○●○●○

フォトショップの作業は以下。 ↓ ↓ ↓ -Photoshop
- - -


『 壁紙を作成-1。-(作成前の準備・背景) 』 の全文読む ≫


seawindnet at 12:28|│Comments(0)TrackBack(0)

September 19, 2009

壁紙のキャラクターとロゴ集め

アロ〜ハ!水着のショップ作成記録の sea-wind.netです。 さて、水着ショップ制作記録のフォトショップで作る画像作成1回目は、「壁紙のキャラクターとロゴ集め」です。

さて、サイト作成の画像面で先ずフォトショップで作ったのが、壁紙。 そして今日はPhotoshopで壁紙を作る素材集めです。 壁紙のサイズの選定は画像の重さも考え又、均一にしたかったので、縦横の同サイズの 150pix × 150pixで作成。 でもpix寸は、正方形なら特にどの大きさでも良いです。

次に、キャラクターやら、ロゴを一つ一つ作りました。 例えば、こんな感じ。 ハワイでパイナップル

参照:水着ショップ案内ページ使用の
http://www.f-j-r.com/infor.htm
水着F-J-R.com壁紙。

『 壁紙のキャラクターとロゴ集め 』 の全文読む ≫


seawindnet at 06:07|│
Welcome
シーウィンド.ネットに
ようこそ。

海の風 シーウィンド。ネット


bookmark

sea-wind.net は、
HP初心者の
画像 soft フォトショップ
での、web-shop 作成記録で
その作ったショップは、

水着製造通販の
水着 通販 F-J-R.com

と、

水着ビキニ上下別売りで
カスタムオーダーの通販お店
ビキニ 水着 Fashion-Swim.com

2店のショップの制作、
骨折り記録です。