アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！ -87ページ目

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 85 | 86 | 87 | 88 | 89 | 最初次のページへ >>

ヘッド画像を作る5　Pixlr　自動選択ツール(2)

コメントの質問に回答が遅れちゃっています

すみませんがお待ち下さい

ごめんなさい　m(_ _)m

+++++++++++++++++++++++++++++++++

土曜日・・コンビニに行ったとき・・

立ち読みしようとポケットの中に手を・・

・・・・・

メガネがない・・・

どこに忘れてきたんでしょ？

しかたがないからいつもは立ち読みで済ましちゃう雑誌も購入・・

日曜日も何度となくポケットを確認・・

左のポケット？あっ・・内ポケット・・

結局見つかるはずもなく・・

土曜・・日曜と・・　メガネをどこに忘れてきたのか思い出そうとするのですが・・

まったく心当たりがなくって・・

心当たりがないはずです

今朝になってやっとわかりました

土日・・いつもと違うジャンバーを着ていました・・

今朝・・いつものジャンバーのポケットの中でメガネ発見！

なにを・・パニクッているのでしょうか？

着ているものが違うって気が付きそうなものですが・・まったく気が付きませんでした

なんか・・この記事を書き始めてから不安なんです

わかるように記事が書けるの？

最後までなんとかなるの？

コメントの質問にも答えている時間がないほど時間がかかるし・・

見ている方はいるの？

本当に役に立つの？

・・・・・

マジ・・ちょっと　ふ・あ・ん・・・・

でもでも・・　とりあえずは本題に・・・

今度は写真を抜いてみます・・

今回素材をお借りしたのは

写真素材足成【フリーフォト、無料写真素材サイト】

こちらのサイトの写真は個人、商用を問わず全て無料で使えて、その上、煩わしいクレジットやリンクの表記、ユーザー登録も一切不要で・・・

おまけにモデルの人物写真にはモデルリリース（肖像権使用同意書）を取得済みの写真があってこういった見本に使わせていただくには最適のサイトさまです

クレジットやリンクが不要といっても・・

こういったすばらしいサイトは出来るだけリンクや記事にして紹介してあげてください

こちらに限らず素材サイトを利用の場合は必ず利用規約を読んでから利用ください

素材の加工がＮＧだったり、加工はOKでも他の素材サイトの素材との組み合わせ加工はNG・・

などなど・・素材サイトによって規約は違います

またどのサイトでも・・画像の直りんは厳禁です！

必ずダウンロードして自分のブログの画像フォルダにアップしてから使ってください

なお・・規約により再配布は禁止されていますのでわたしのブログからはお持帰り厳禁です

http://www.pixlr.com/

高機能で無料のオンライン画像編集ツール

いつものように日本語化させてから・・・

http://ameblo.jp/exlink/entry-10504899904.html 日本語化はコチラを見てください

パソコンに保存してある画像ファイルを開く場合は・・

Open image from computer

前回と同様に背景をレイヤーにします

今回は周りがゴチャゴチャしていますので必要な部分に先に切り取ってから作業します

切り抜きツールで切り抜きます

前回と同じように自動選択ツールを使って抜いていきます・・

Ctrlキーを押しながら　＋(プラス)キーで表示を拡大させると細かな作業がやりやすいです

（ちなみに・・チェックの部分が透明です・・　　背景のままでは透明になりません）

大きな部分は選択ツールで選択してから　カット

細かな部分は消しゴムツール・・・

ブラシオプションで適当なブラシを選んでからマウスで消していきます

もし・・動作がカクカクしておかしな場合はもう少し小さいブラシに変えてください

レイヤーの小窓がジャマでしたらドラッグで移動させます

表示を100%にして確認します

キレイに消すためには・・後ろが透明のチェックだとわかり難いです・・

そんなときはレイヤーの下・・ゴミ箱の左・・新しいレイヤーを作ります

レイヤー1が出来ました（名前は変更できます）

レイヤー1を１色で塗りつぶします

塗りつぶしツール　　前景色を指定　　画像で使われていないような色を選択します（面倒なら白でも・・）

レイヤー1が青くなっているのを確認してから・・画面のどこでもいいのでクリック・・

選択した色で塗りつぶされます・・

レイヤーを上と下を入れ替えます・・　

背景が黄色になってどこを消したかがわかりやすくなりました

レイヤー1の青い部分をドラッグでも動かせますが・・

レイヤーが増えてくると思ったように入れ替えられませんのでアイコンを使った方がいいです・・

作業するレイヤーをクリックして青くしてから作業します

表示を100%にしてOKなら・・黄色いレイヤーは必要ありませんので

レイヤー1をクリックしてレイヤー1が青くなったのを確認してゴミ箱アイコンをクリック

レイヤー1を削除しなくても　レイヤー1の□のチェックを外せば見えなくなりますのでそれでもOKです

余計な作業レイヤーがあってもチェックを外して見えなくすれば見えない部分は保存しても見えないまま保存されます

完成したら保存します・・

ファイル　→　保存

アメブロにアップする場合はファイルの形式を　JPEG　か　PNG　で保存します

特に・・今回のように背景を透明にしている場合は　PNG で保存します

（JPEG では透明になりません・・透明部分が白く塗りつぶされて保存されます）

PXD　は・・　このままの状態で保存します（レイヤーなどもそのままで保存できます）

作業途中の場合や後で加工しなおす場合などこの形式で保存しておけば大丈夫です

画像で保存するのとは別にいつもこの形式でも保存しておけば後で修正が必要になったとき楽です

黄色のレイヤーを削除する前に　PXD で保存しておくことを薦めます・・

必ず違う名前をつけて保存します・・

でないと・・元の画像に上書き保存されてもとの画像がなくなってしまいます

今回は・・保存しただけでは終わりません・・

ヘッド画像にこの花を散りばめようと思っています・・

一つ一つを作業して用意するのは面倒ですので・・

調整　→　色調＆彩度

色調や彩度や場合によっては明暗などを　調整すると色を変えることが出来ます・・

そのつどPNGで別の名前をつけて保存して何種類も画像を作っておきます・・・

1つの画像で色違いの何種類もの画像が出来ちゃいました・・

また・・青とか緑ぽく加工した画像をさらに・・　調整　→　色調＆彩度　で・・

またまた　違った色に加工できます

ただ・・　白い画像は・・なにをしても・・白です・・

他にも・・・

フィルター　→　パステル　なんかも面白いかもです・・

パステル画のようになりました・・・

この画像を　調整　→　色調＆彩度　で色を変えたりも・・

あるいは色を変えた画像をパステル処理したり・・・

全部のフィルターは説明しませんので・・

いろいろやってみてどんな効果があるのか確かめてください

レイヤーの小窓にレイヤーマスクのボタンがあります・・

遊んでみて使い方を覚えたら便利です・・

説明はしませんが・・　　　って・・

わたしは・・　使ったことがありませんので・・説明できません

つぎは・・なにを説明しようかな？

計画もなしに適当にやっているからパニクッちゃうんですね・・　たぶん

本当に・・大丈夫なんでしょうか？こんな説明でわかりますか？

・・・・？

ヘッド画像を作る4　Pixlr　自動選択ツール(1)

自動選択ツール・・・

自動で同じ色や似たような色の範囲を選択して切り抜くことができます

ピグ画を抜いてみます・・

まずは抜きやすいように背景が出来るだけ何も無い所で・・ハイ！チーズ・・

こんな画像が撮れました

画像のＵＲＬを調べておきます・・

http://www.pixlr.com/

高機能で無料のオンライン画像編集ツール

いつものように日本語化させてから・・・

http://ameblo.jp/exlink/entry-10504899904.html 日本語化はコチラを見てください

Open image from URL

画像のＵＲＬを入れてから確認・・・

または・・パソコンに保存してある画像ファイルを開く場合は・・

Open image from computer

画像が表示されたら

まず・・・

レイヤー窓に表示されているレイヤー名が背景になっていますので・・

右の鍵をダブルクリックしてレイヤー0 にします

（レイヤー名は修正も変更も可能ですので・・　とにかくレイヤーにします）

※背景のままだと出来ない作業があったり・・透明にすることは出来ません

鍵が　□にチェックになればOKです・・

ちなみに・・もう一回クリックしてチェックを外すと見えなくなります・・

もう１回クリックしてチェックをつければまた・・見えるようになります

いよいよ・・自動選択ツールの出番です

ツールの中から自動選択ツールを選択

編集→カット・・またはBackSpaceキーで選択された部分が削除されて透明になります

このとき・・カットする前に・・

Ctrlキー　と　＋(プラス)キー　で表示を拡大して・・　選択範囲がいいか確認します

選択範囲がずれたりしていたら・・限界値を変更したりしてやり直します

限界値－　選択されたピクセルの近似値または差異を決定します

　　　　　　　ピクセル単位で 0 ～ 255 の値を入力します

　　　　　　　限界値が低いと、クリックしたピクセルに非常に近い色が選択されます

　　　　　　　限界値が高いと、選択される色の範囲が大きくなります

アンチエイリアス－滑らかなエッジの選択範囲を作成します

隣接　－　同じ色を使用している隣接領域だけが選択されます

　　　　　　　指定しなければ、画像全体で同じ色を使用するピクセルがすべて選択されます

範囲が点線で囲われてから・・ついでに他の色も一緒に選択するには・・

Shiftキーを押しながら　別の色の部分でクリックします・・

処理が終わったり・・選択範囲をやり直したい場合で・・

いつまでも・・範囲の点線が消えない場合は・・・・

編集　→　全部を選択を取り消し（全部の選択を取り消し）　で・・消えます

残っている部分は・・

大きく残っていたら・・　選択ツールで　その部分を囲ってから　カット

または・・

消しゴムツールで・・　ブラシオプションから適当な形、サイズを選択してから　クリックやドラッグで消します

ある程度・・　周りが透明になったら・・

（このとき・・下に別の色をつけたレイヤーを配置すると作業が楽です・・　次回に説明します）

切り抜きツール　で必要な部分だけに切り取ります

表示を100%にして確認してOKでしたら保存します

ファイル　→　保存

アメブロにアップする場合はファイルの形式を　JPEG　か　ＰＮＧ　で保存します

特に・・今回のように背景が透明にしている場合は　PNG で保存します

（JPEG では透明になりません・・透明部分が白く塗りつぶされて保存されます）

PXD　は・・　このままの状態で保存します（レイヤーなどもそのままで保存できます）

作業途中の場合や後で加工しなおす場合などこの形式で保存しておけば大丈夫です

画像で保存するのとは別にいつもこの形式でも保存しておけば後で助かる場合があります・・

ヘッド画像を作る3　Pixlr　ブラシツール

http://www.pixlr.com/

高機能で無料のオンライン画像編集ツール

今回はブラシツールです・・・

使い方は前回の鉛筆とほとんど同じです・・なので簡単に説明します

ただ・・鉛筆とは違ったオプションが付いてきます・・

ブラシツールを選択して　ブラシのオプションで筆先の形やサイズを選択します

既成の形だけでなく・・範囲や圧力等を自由に変えて好きな形状にできます

ここでもいろんなブラシで色や不透明度を変更して遊んでください

ブラシには鉛筆にはなかったオプションがあります

スキャター（スキャッターの誤訳？）
直線状に並ばないである程度の範囲に拡散されます

こちらも拡散なんですが・・

周りに拡散しないで・・線の内部で拡散？します

次は自動選択ツールの予定です・・・

？？？・・　今・・気がつきました・・　後の画像のメニュ・・

文字がゴシックになっています・・？

明朝だと見にくくて・・どうやったらゴシックになるんでしょ？

ちなみに使っているパソコンは同じです・・

・・・・？

<< 前のページへ最新 | 85 | 86 | 87 | 88 | 89 | 最初次のページへ >>

ブログ画像一覧を見る

このブログをフォローする

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！

ヘッド画像を作る5 Pixlr 自動選択ツール(2)

ヘッド画像を作る4 Pixlr 自動選択ツール(1)

ヘッド画像を作る3 Pixlr ブラシツール

ヘッド画像を作る5　Pixlr　自動選択ツール(2)

ヘッド画像を作る4　Pixlr　自動選択ツール(1)

ヘッド画像を作る3　Pixlr　ブラシツール