オリジナルスキンCSSの編集 画像の加工 | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

オリジナルスキンCSSの編集 画像の加工

今回はチョット面倒なサンプルを用意してしまいましたので

ついでに?

画像加工ソフトの使い方もやってみます


すでに画像編集をやっておられる方はスルーしちゃってくださいな

たぶん次回も画像加工ソフトの続きになると思います




まだ画像加工ソフトをお持ちでなく

WIN附属のペイントを使っておられる方・・・・

無料でカンタンなソフトがありますので紹介しておきます

macな方・・・・ごめんなさい m(_ _ )m


JTrim
初心者向けフォトレタッチソフト
http://www.woodybells.com/jtrim.html
フリー無料の画像加工ソフトです

※Vistaに正式対応してはいませんが、概ね良好に動作します


画像のトリミング、縮小、文字入れ等も簡単にできます

16回分のアンドゥ機能もついているのでやり直しも楽です

デジカメの画像もアメブロ用に縮小加工もカンタンなので
もし画像加工ソフトをインストールしていない場合はお勧めします


インストールの方法はサイトをご覧下さい




用意が出来ましたら

まず画像を借りてきます

ポカポカ色   → 素材 → テーブル の中の素材を加工しています



最後には自分のパソコンに保存しますので


最初は加工して広げる必要のある真ん中の画像からです

あさひ さまのサイトで欲しい画像の上で 右クリック → コピー

JTrim の編集 → 貼り付け  で、JTrimに貼り付けます


真ん中を貼り付けたらコピー・・・

実際はすでにコピーで貼り付けていますからココではコピーの必要はありません



コピーして連結で貼り付けて横に長くしていきます


コピーしていますので クリップボードから入力にチェックしてください

同じ画像ですから連結方向は右でも左でも同じです

ある程度の長さになるまで繰り返しますので

この設定を保存し・・・・にもチェック



コピー → 連結 を繰り返すと倍々で大きくなりますので楽です


ある程度のサイズになりましたら

左と右にも画像を貼り付けて完成形にします



左の画像を選択して左へ連結貼り付けします

すでにあさひさまの画像をパソコンに保存していましたのでパソコンからの呼び出しで説明していますが

上の真ん中の画像ように あさひさまのサイトで左の画像の上で右クリック→コピー

JTrim の編集 →連結 、クリップボードから入力にチェック、 左へ 、OKでかまいません

右の画像の連結も同じです




次に右の画像を選択して右に連結貼り付けします


このままでは画像が大きいので縮小します・・・・ここで保存しておくことを薦めます


↑リサイズをクリック・・・デジカメで撮った写真を縮小するのもココです

↓記事枠のサイズに合わせて横を入力します、縦は自動で入ります

※比率で指定するにカーソルがありますがたまたまそこにあっただけです

 比率ででも指定は可能ですが私は1度も使ったことはありません




Ctrl + + で(コントロールキーを押しながらプラスキーを押すごとに)表示が大きくなります

細かな修正する場合はプラスキーを何回か押して大きくすると作業しやすくなります

小さくする場合はコントロールキーを押しながらマイナスキーです

サイズの横の虫眼鏡の横に画像の表示%が出ています

これはここでの表示のサイズ、見かけのサイズであって実際に拡大縮小しているわけではありません

100%が実際のサイズになります


縮小されたら念のため保存しておきます




今回の画像はwellcomって入ってしまっています

気になりますので消しちゃいます

※本当は縮小する前にこの作業は行なってください


↑消す下地と同じ部分をドラッグして範囲指定をしてからコピー

↓そして合成貼り付け


↓左上にコピーした部分が表示されますのでドラッグで消したい部分に移動させてから「位置確定」


合成貼り付け → 消したい部分に移動 → 位置確定 を繰り返します


↓OKでしたら保存




※白とグレーのチェック部分は透明を表しています



次回はこの画像から上、中、下の画像を作ります



オリジナルスキンCSSの編集 記事枠(画像)

オリジナルスキンCSSの編集 記事枠(画像)2


オリジナルスキンCSSの編集 画像の加工2

オリジナルスキンCSSの編集 記事枠(画像)3

オリジナルスキンCSSの編集 記事枠(画像)4

オリジナルスキンCSSの編集 記事枠(画像)4´(ダッシュ)

オリジナルスキンCSSの編集 記事枠(画像)5

オリジナルスキンCSSの編集 記事枠(画像)6

オリジナルスキンCSSの編集 記事枠(画像)7