アメブロのヘッダーをピクスラーエディター(pixlr editor)で作るには | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
アメブロのヘッダーを作ってみました。

渡辺麻友


設置したら、こんな感じになりました(↓)。

渡辺麻友


参照⇒▶ ピクスラーエディターでフェイスブックのカバー画像を作ろう! - YouTube

こちらのサイトのソフトを使いました。
(※ダウンロード、インストール不要の
無料のサイト様です)(↓)

ピクスラー⇒Photo editor online / free image editing direct in your browser - Pixlr.com


ピクスラーエディターでヘッダー画像を作る方法

(※アメブロの[CSS編集用デザイン]のヘッダー
スペースの大きさは横幅:980px;高さ:300pxです。
それより大きめの画像を用意しておいて下さい)







(1)基本となる画像のサイズ調整

まずは、サイトのページを開いて
[コンピューターから画像を開く]
をクリックして下さい。

フェースブックページ


次に現れた小窓から、ヘッダーの
背景にしたい画像をクリックして下さい。

渡辺麻友


次に大きさを調整します。
(最初に横幅を設定します。)
※アメブロに設置した時、若干、端が切れて
しまう事があるので、少し大きめの985px
位が良いと思います。


『横幅』
左上の[画像]をクリック→[画像サイズ]
をクリックして下さい。

渡辺麻友


次に現れた小窓で数値(ピクセル)を
入力して[OK]を押して下さい。

渡辺麻友



『高さ』
再度左上の[画像]をクリック
→[キャンパスサイズ](高さを決める)
をクリック。

渡辺麻友


次に現れた小窓で高さ(今回は305)を
入力して、[OK]をクリックして下さい。

渡辺麻友


(2)文字入れ


次に文字をいれて行きます。

左ツールボックスの[A]をクリックして、
画像の上でクリック。
テキストボックスが開きますので、その
テキストボックスで文字を入力、色やサイズ、
書体を選択して[OK]を押して下さい。
(※フォントや色等の箇所をクリックすると
小窓が現れますので、そこで、お好みの物を
選択して下さい。)

渡辺麻友



つぎに今入力した文字の装飾を
していきます。

『文字の装飾』
右側[レイヤーボックス]の下側の小さなボタン(アイコン)[レイヤースタイル]
をクリック。
現れた小窓で、装飾の種類を選んで下さい(今回は[ドロップシャドウ])。
選んだ項目の箇所ををクリックすると、詳細な選択が出来るように窓が広がり
ますので、そこで詳細を決めて[OK]ボタンをクリックして下さい。

渡辺麻友


※文字の移動
左側の[ツールバー]最上部の[移動ツール]を
クリックしてから、画面上の文字をドラッグ
して位置調整して下さい。

渡辺麻友



(3)画像の添付


まず最初に[レイヤー窓]のロックの
解除(鍵マークをWクリック)をして下さい。

渡辺麻友



次に挿入する画像を選択します。

[ツールバー]の[ファイル]→[画像を開く]


渡辺麻友


御自身のパソコンの[フォルダー]から
「ファイル」を選択してクリックして下さい。

渡辺麻友


つぎに、上の[メニューバー]の「画像」→[画像サイズ]
で画像の大きさを調整します。

渡辺麻友


※本体(背景?)の画像の横幅が約980ピクセル
ですので、100とか300とかに適宜調整して下さい。
渡辺麻友


つぎに
サイズ調整したものをコピーして、
背景に貼り付け
ていきます。

左側の[ツールバー]の「範囲指定」をクリック
→画像をドラッグして点線で囲む
→メニューバーの「編集」→「コピー」をクリック。

渡辺麻友


つぎに背景画像の枠をクリック。

渡辺麻友


「編集」→「貼り付け」

渡辺麻友


このように背景画像の上に新たに
画像が乗る感じになります。

渡辺麻友



左[ツールバー]の「移動ツール」のボタン(アイコン)
をクリックしてから適当な位置に移動させる。

渡辺麻友


---

以後、何回か、この作業を繰り返して、
複数の任意の画像を乗せます。

---

(4)加工した画像の保存


左上「ファイル」→「保存」

渡辺麻友


→「フォーマット」
→「Jepg又はPng」を選択→「OK」
渡辺麻友


パソコンに保存する小窓→「保存」

渡辺麻友



---


ピクスラー⇒Photo editor online / free image editing direct in your browser - Pixlr.com

[※追記]
※初期設定のままだと、[ブログタイトル]
と[ブロブ説明文]がヘッダースペースの
左上に表示されます。
その場所は開けるようにしておいた方が、
良いかもです。


渡辺麻友


---

しかし、この方の説明は
解り易いです。

Pixir Editorの使い方(初歩) - ネットビジネスでストレスのない独立起業~ブラック企業被害者のあなたへ~
ナリリンの「明るい未来計画!」





参考になりましたでしょうか~?^^;

※追記:ヘッダー画像が作成できたら、こちらで・・
アメブロにヘッダー画像を設置するには

・おまけ^^;
Excelで画像に文字を入力するには(ヘッダー作成)


☆ブィブィ ゞ(^_^)v


未熟なり。

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ