ところで
熱中症に耐え、ガンバッテますか～？　(^O^)/
ha、ha、ha、水分補給十分に　！

梅雨明け以来、暑いですね～！

猛暑が来た～！　と、言う感じですが、
激暑が来るとか、
残暑厳しく、長い夏になるとか、
テレビでは色々と伝えてますが、
ま、夏好き、海好き、の私にはウレシイ話ですし
夏が忙しい水着のお仕事なので
水着ショップとしても有難い夏です。

そんなこんなで、
今月は、
「　壁紙をフォトショップで作成　」はお休みです。

って、どんな？そんな？　
なんてつっこまないでね。

ま、夏なので、ちょっとバタバタです。

sea-wind.net
ブログのテーマは
HP初心者の画像softフォトショップでの、
骨折りHP作製のブログです。

女性用水着の専業メーカーが本職。
生まれつきの水着の職人さんって感じです。
netで作ったＨＰは水着の通販のお店で、
水着通販 F-J-R.com の格安な本店

レディースファッション水着を
自由に組合せていただける様、パーツ別に通販している
 水着、ビキニ上下別の通販 Fashion-Swim.comの
2店で、工場直販のお店やってます。

ま、繊維以外は、専門分野でないので、
回り道ばかりですが、
そんな、ショップ制作、骨折り記録ブログです。

- - -

- - -

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

- - -

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

今回も前回の続き。

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

前回、４つのキャラクター （ ４つのレイヤー ） を複製し
８つのキャラクター （ ８つのレイヤー ） になりました。
（+背景も入れレイヤー９こ）

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



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

８つのキャラクターの、８つのレイヤーを
１６こ のキャラクターの、１６こ のレイヤーにします。
（+背景で１７）



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

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

（300pix × 300pixに。）

‐‐- - - -

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

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

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

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





５・元画像の拡大。

（　赤枠の部分が最初作成した画像　）

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

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

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

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

ゴメンネ　！！　　（;´▽｀A``


！(´Д｀；)

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

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



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

- - -

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

- - -

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

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


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


‐‐- - - -

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

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

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




５・元画像の拡大。

（　赤枠の部分が最初作成した画像　）

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

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

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

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

ゴメンネ　！！　　（;´▽｀A``


！(´Д｀；)

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

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



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

- - -

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

- - -

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

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

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

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


‐‐- - - -

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

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

◎150 × 150pix の白背景。




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

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

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

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

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

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

ゴメンネ　！！　　（;´▽｀A``


！(´Д｀；)

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

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



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

- - -

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

- - -

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

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


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

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

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

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

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

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

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

◎150 × 150pix の白背景。




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

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

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

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

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

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

ゴメンネ　！！　　（;´▽｀A``


！(´Д｀；)

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

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



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

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

- - -

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

それは、壁紙の場合、

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

です。

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

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

- - -

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

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

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

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

◎150 × 150pix の白背景。




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

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

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

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


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

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

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

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



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

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

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


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

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