ヘッド画像を作る2 Pixlr 鉛筆ツール | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

ヘッド画像を作る2 Pixlr 鉛筆ツール

タイトルロゴの作り方はわかりましたか?


説明の都合で最初に説明しちゃいましたが・・

本来ならヘッド画像を作ってそれから画像に合わせてタイトルロゴを作ります


http://www.pixlr.com/

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

オンライン上で作業できる割には高機能なんです

特に・・レイヤーが使えることがこれを選んだ最大の理由です

また文字も日本語が使えてパソコンにインストールされているフォントが使えます

ただ・・ただの文字なのでタイトルに使うには・・物足りない

ということで・・タイトルロゴは別ので説明しました


来週の週末目指して使い方の説明からしていきます・・・



pixlrのトップ画面で →Open image editor← をクリック


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

これが・・作業画面です・・

最初に日本語のメニュに変更します

×をクリックで窓を消します

画像を選んだ後で日本語にしてもいいのですが・・ 

小窓が変な位置に固定されちゃう場合がありましたので・・先に日本語表示にします


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

上のメニュから Language → 日本語
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


なんか・・見にくい明朝の日本語メニュになりました・・

ところどころでおかしな日本語になっていますが・・気にしない気にしない


練習兼ねた説明なので新規画面を選択します

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


練習なので画面サイズは適当に・・・

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


最初にじゃまなナビゲータとヒストリ(ヒストリー)の窓を消します


※この2つはたぶん今後も使わないと思います・・・

 もし・・必要なら上のメニュのビューからまた表示させることができます


 毎回この3つの小窓が表示されますが・・

 まだじゃまにはなりませんが・・実際の作業ではじゃまになります

 毎回消しちゃってください・・


今回の説明ではまだ・・使いませんが・・必要なのはレイヤーだけです

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


窓はドラッグで自由に位置を変更できます

作っていくうちに窓の位置がじゃまになったら位置を動かして作業します


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



最初の練習です・・

鉛筆ツールを選択します

ツールを選択するとそのツールで使えるオプションが上に表示されます

鉛筆ツールの場合は「ブラシ」と「不透明度」

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


まずは・・ブラシ(鉛筆の先端の形とサイズ)を選択します


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


ブラシの窓が他のツールと共通なので紛らわしいのですが・・

鉛筆ツールで使うのは形のはっきりしたブラシです

(ぼんやりしたのはブラシツールで使います・・  間違っても大丈夫です・・似たようなのになります)



あとはマウスで線を描くだけ・・・

不透明度を変更したり・・いろんなブラシを使ってみて練習(遊んで)ください


間違ったり・・気に入らなければ

メニュ→ 編集 → 取り消し で・・前の状態に戻せます

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

色の変更は・・・カラーピノカ(カラーピッカーのことです・・・変な日本語訳ですが気にしないで)

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


または・・前景色をクリックするとカーソルがスポイトに変わりますから・・

画面上の使いたい色の部分にスポイトをあててクリック

(スポイトの先端部分に位置する部分の色が抽出されます)


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

(この場合・・画像の中だけでなくウインドウの中ならどこの色でも取れます)


画像画面の右上の□をクリックで全画面表示に


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


キーボードのCtrlキーを押しながら +(プラス)キーで画像が拡大表示されます

細かな部分を作業するときには+キーを何回かおして作業しやすいサイズまで拡大します

結果を見る場合はCtrlキーを押しながら-(マイナス)キーで表示を100%にすれば実際の見た目になります
(これはあくまでも作業上の見た目の拡大縮小です・・)

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



次はブラシツールの予定です・・・・




ちなみに・・

エッジにぼかしのない輪郭のはっきりした線を描くには鉛筆ツール
エッジにぼかしがある線を描くにはブラシツールを使います
いろいろ描いてみて違いを確認ください




わからなかったら・・ 自分で何とかしましょう・・・? 質問はナシよ・・・



パソコンにインストールするわけではありませんので

自由に遊んじゃってください・・・

また・・あまり大きく拡大すると動きがカクッカクッってなる場合があります・・

作業しにくかったら表示を少し小さくすればなおります




ヘッド画像を作る1 タイトル Cool Text

ヘッド画像を作る3 Pixlr ブラシツール
ヘッド画像を作る4 Pixlr 自動選択ツール(1)
ヘッド画像を作る5 Pixlr 自動選択ツール(2)
ヘッド画像を作る6 Pixlr 写真の修整
ヘッド画像を作る7 Pixlr フィルター・モザイク
ヘッド画像を作る8 Pixlr グラデーション
ヘッド画像を作る9 Pixlr 文字
ヘッド画像を作る10 Pixlr 四角、円、直線
ヘッド画像を作る11 Pixlr レイヤー
ヘッド画像を作る12 Pixlr レイヤーの複写とレイヤースタイル
ヘッド画像を作る13 Pixlr メニュ一覧
ヘッド画像を作る14 Pixlr 実践