BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » スタッフ» ブロガー必見!オリジナルアメブロヘッダー画像の作り方

このエントリーをはてなブックマークに追加

ブロガー必見!オリジナルアメブロヘッダー画像の作り方

   投稿日: 2016/01/23    投稿者:スタッフ

無料高機能画像編集ソフト「Pixlr Editor(ピクセラエディタ)」の使い方をご紹介!

Pixlr Editorの使い方シリーズ「これがやりたい!」第五弾!


前回に引き続き、もっと本格的にタイトル画像を作りたいと言う方に、

アメブロヘッダーのメイン画像を作る方法をご紹介します。

今回は、今まで使ってきたツールの総集編でいろんなツールを使いながら

お洒落な画像を作っていきます。

今回お届けするのは、「オリジナルアメブロヘッダー画像の作り方」です。



今回使用する画像素材はこちらになります。

画像加工の練習にお使いください。


【加工前素材】

sozai.jpg





【加工完了後】

ameblo_header.jpg


blog201601231.jpg

目次
1.新しい画像を作成しよう
2.写真素材を配置しよう
3.背景として使える画像に加工しよう
4.テキストを入れよう


Pixlr Editorのサイトはこちら


【1.新しい画像を作成しよう】

1.下記の「新しい画像を作成」または、メニューバー「ファイル」→「新しい画像」をクリックします。


ameblo01.jpg




2.作成する画像のサイズを入力します。

アメブロのメイン画像サイズは基本的に「980px * 300px」 となっています。

なので、今回は「幅:980」、「高さ:300」と入力します。

「名前」も入力しておきましょう。


ameblo02.jpg






【2.写真素材を配置しよう】

1.画像の背景として使う写真素材を開きます。

メニューバー「ファイル」→「画像を開く」をクリックします。

今回は素材として用意している写真素材を選択して「開く」をクリックします。


ameblo03.jpg



2.配置した写真素材のサイズを変更します。

メニューバー「画像」→「画像サイズ」をクリックします。

今回は背景の縦のサイズに合わせて「高さ:300」と入力します。

※下の「縦横比を固定」にチェックが入っていることを確認して下さい。


ameblo04.jpg



3.サイズ変更した写真素材を背景画像に重ねます。

右のレイヤーウィンドウで、先ほどのサイズ変更した画像が選択されていることを確認して

背景画像の上にドラッグ&ドロップします。


ameblo05.jpg



blog201601232.jpg

4.画像の位置を調整します。

左の「移動ツール」を選択して画像を移動し位置を合わせます。


ameblo06.jpg






【3.背景として使える画像に加工しよう】

背景として使うには、このままでは変ですね、、、

写真の幅を広げましょう。

いろんな方法がありますが、今回は重ねた写真の一部の幅を伸ばして背景画像を作ります。


1.左の「選択ツール」を選択して、伸ばす部分を選択します。

今回は、写真素材のモデルさんの左側だけを下記のように選択します。


ameblo07.jpg



2.選択した部分をコピペして複製します。

メニューバー「編集」→「コピー」をクリックします。

メニューバー「編集」→「ペースト」をクリックします。


ameblo09.jpg


blog201601233.jpg

3.自由変形ツールで幅を広げて調整します。

メニューバー「編集」→「自由変形」をクリックします。

幅を広げて位置を調整します。


ameblo11.jpg



4.複製したレイヤーと写真素材のレイヤーを統合します。

複製したレイヤー(一番上のレイヤー)を選択して、

メニューバー「レイヤー」→「統合」をクリックします。


ameblo12.jpg



5.最後に複製して伸ばしたレイヤーとの境目に縦線が目立つのでなじませます。

左の「スポット修復ツール」を選択します。

ブラシの大きさを調整して、縦線の部分をなぞります。


ameblo13.jpg






【4.テキストを入れよう】

1.お店の名前や、ブログのタイトルなどの文字を入力します。

左の「タイプツール」を選択します。

テキストを入力して、「フォント」「サイズ」「色」を指定します。


ameblo14.jpg



2.必要な場合は、前回の「ブログに必須の画像加工術!お洒落でカッコいい画像の作り方」を参考に

「レイヤースタイル」で調整してください。


blog201601234.jpg






以上で完了です!

今回は、少し難しいこともやりましたが、

時間をかけただけのタイトル画像が出来たのではないでしょうか?

ツールの使い方は、人によってバラバラなので、

ぜひ応用してあなたならではのオリジナル画像を作成してみてください。

カテゴリ:

TOPへ