ブログデザイン

husahusa流アイキャッチの作り方!photoEditor:PixlrXでお手軽簡単に作成可能!?powerpointがあればなお良し!

今回はわたくしhusahusaが普段記事に使用するアイキャッチを作る時にやっている方法を紹介しようと思います!

事前の環境説明

まず初めにアイキャッチに使用する画像の大きさを選びます。
その際に参考にした記事はこちらです。

この記事では最終的に714×500がはてなブログ・ツイッターなどの様々なメディアでの記事投稿の際に表示される大きさのベストではないかと記載されています。

しかし、俺が使っているカスタムデザインが「UnderShirt」というものなのですが、このデザインの場合縦の大きさが少し大きく、はみ出してしまいます。
なので、現在アイキャッチを作成する場合の大きさは714×400で作っています。
他のデザインを使用している方は714×500のままでいいかもしれません

使用ソフトなど

俺が使っているのは基本的にPhoto Editor : Pixlr X - free image editing onlineというサイトです。
使用料無料でフォトショップの様な環境が手に入ります。

それと主にフォント面で使っているのはpowrepointです。
powrepointはあった方がいいレベルの物なのでなかったらなかったで問題ないかと思います。

実際のアイキャッチ作成の流れ

まずはPhoto Editor : Pixlr X - free image editing onlineにアクセス!
するとこのような画面になります。

f:id:husahusadayo:20191026235250p:plain

HISTORYっていうのは今までの作成したものがある場所です。
皆さんは何もないかと思います。
新規作成の際は真ん中のCREATE NEWを選択。

f:id:husahusadayo:20191026235452p:plain

色々と大きさのテンプレが出てきますが、今回は画面右のbox欄で大きさを以下の様に選択します。

NAME:なんでもok
WIDTH:714
HEIGHT:400(もしくは500)
※BACKGROUNDをオンにした場合選択した色が背景色になります。逆にオフにすると背景が透明化します。特に理由が無い限りはオフにした方が作り易いかと思います。

数値を選択後下のCREATEを選択。
作成後の画面はこうなります。

f:id:husahusadayo:20191027000059p:plain

基本的に俺が使用しているのは左に並ぶアイコンの一番下の山っぽい奴です。
カーソルを合わせると「Add image」と表示されるのでそれを選択。
因みにADDという単語が頻繁に出てきますが、これは~を作成するという意味と捉えておいてください。

f:id:husahusadayo:20191027000309p:plain

更に三択が出てくるのでおばさん(STOCK)を選択。
その先の画面の左側ブロックのOPEN IMAGEを選択し、適当に画像を選択。

画像を選ぶとこのような画面に。

f:id:husahusadayo:20191027000658p:plain

CREATE NEWを選ぶとまた新しいページになってしまうので、ADD CURRENTを選択すると先ほど作った大きさのページに画像が貼られます。

f:id:husahusadayo:20191027000859p:plain

既にこのサイトの凄さが出ています。
元の画像はこちら。

f:id:husahusadayo:20191027000953j:plain
適当に拾ってきたやる気のない猫の画像です。
見て頂ければわかるのですが、画像の大きさが714×400ではありません。
そう、このサイトは画像を貼った際に、調整したキャンパスの大きさに画像を勝手にトリミングしてくれるのです!
しかも画質は落ちていませんw

左右に空白はありますが、これだけでアイキャッチに使用しても問題ない所まできました!
今回は更に手を加え、文字も追加してみようと思います。

f:id:husahusadayo:20191027001410p:plain

下から三番目のTの形のTextを選択。
そうするとADD NEW TEXTと出るのでクリックすると何やら文字が出てきます。

f:id:husahusadayo:20191027001855p:plain

文字はTEXTのボックス欄で変更できます。
その他は

・ALIGN わからん記号の奴 CASEは文字を左・中・右揃えにするもの
・FONTはフォントね
・COLORは文字色

更には他にも色々文字を調整できます!

そうして出来たのがこちら!

f:id:husahusadayo:20191027002628p:plain

フォント面で変更したのは以下の通りです。

・文字列を中央ぞろえに
・SIZEを18.5(その際に文字ボックスの幅をキャンパスの最大まで広げておく)
・OUTLINEを使用。SIZEを10、COLORを白に
・SHADOWを使用。数値は上から全て30に設定し、COLORを黒色に

これで今回のアイキャッチの文字になります!
因みにこの文字の部分をpowerpointで作成する時もあります。
ですがこのようにPixlrXだけで完結しているので無理に使う必要は無いです。

普段俺がアイキャッチを作っている時の方法はこんな感じです。
いかがだったでしょうか?簡単でしょう?
本当に無料で使用できるし、今まで作ったキャンバスも保存されるのでおすすめのサイトです!

本当に無料でいいのか?という出来ですが、フォントの種類自体はあんまりと言う感じ、その部分を補うためにpowerpointを使用している感じですね。

今までこのサイト知らず、アイキャッチ作りに苦戦している人は一度使ってみて下さい!

ABOUT ME
アバター
husahusa
ゲーム大好きなゲーマ。 自分の持てる情報や攻略法を共有したいと思いブログを始めました! 簡単なものから難しいものまで幅広く攻略やレビュー記事を書いています! 他にも雑談は勿論、ゲームアプリの紹介やブログデザイン記事なども書いています! PSNアカウントID:SIN_K15 良ければtwitterやpsnでフレンドを送ってください!

COMMENT

メールアドレスが公開されることはありません。