YouTube & プライベート日記

書いてる人の趣味をはじめ、多方面な記事を執筆しています。

あなたは人目のお客様です

【全ブログサイト共通】読者登録ボタンの作り方 Part2「装飾編」

こんにちは、ジャッカルです。

今回も前回に引き続き、

f:id:jackal2801:20180206230703p:plain

を作って行きたいと思います。

今回の「装飾編」は、画像の中の青い四角の部分と、黄色の文字の部分を描いていきます。

 

目次

[:contents]

 

完成品はこちら

f:id:jackal2801:20180206230703p:plain

今回も先にお見せします!!

スマホアプリでありそうな、立体感のあるデザインに仕上げました。

青系の色が好きなので、ベースを青にして文字には補色になる黄色を使いました。

今回はこのボタンの作り方を実際の画面とともに説明します!!

ちなみに、クリックで実際に読者登録できます。(クリックしてネ)

 

前回のおさらい

前回は、加工する画像のサイズを正方形に設定するところまで解説しました。

前回の解説を見たい方はこちらから確認できます。

jackalland.hatenablog.com

 

1.前回の画面より

 

f:id:jackal2801:20180206233255p:plain

 

この画面まですすめることができました。では、ここからの手順を説明します。

 

2.図形の配置

では本題に入ります。

f:id:jackal2801:20180206164708p:plain

f:id:jackal2801:20180206164713p:plain

f:id:jackal2801:20180206164724p:plain

f:id:jackal2801:20180206164730p:plain

f:id:jackal2801:20180206164736p:plain

手前と奥の区別がつかなくなりますのでお気をつけください。

f:id:jackal2801:20180206164747p:plain

f:id:jackal2801:20180206164752p:plain

f:id:jackal2801:20180206164804p:plain

少し薄めの色に設定してみました。

3.文字の配置

f:id:jackal2801:20180206164759p:plain

続いて「読者登録」の文字を配置します。

f:id:jackal2801:20180206164814p:plain

入力ができたらEnterキーを押す。

f:id:jackal2801:20180206164821p:plain

最初は小さいサイズで配置されますので大きさを変えます。

f:id:jackal2801:20180206164826p:plain

見やすくするために色を変えます。

今回は青の補色である黄色で色のバランスを整えます。

f:id:jackal2801:20180206164831p:plain

以上で完成させることができました。

 

4.パソコンへ保存

続いては、画像データとしてクロスメディアしやすくするためにパソコンへ保存(ダウンロード)します。

f:id:jackal2801:20180206164841p:plain

この3つの手順を踏むと、、、

f:id:jackal2801:20180206164847p:plain

ウィンドウ左下にダウンロードのタスクが出現しました。円になったゲージがいっぱいになったらダウンロード完了です。

 

5.読者限定無料コンテンツプレゼント

ここまでお読みいただきありがとうございました。この記事をお読みのみなさんに今回作成した画像をプレゼントさせていただきます。

クリックでダウンロードできます。

f:id:jackal2801:20180206230703p:plain

 

作成を終えて

今回は本格的にボタンを作成したのは今回が初めてでした。

また、画像を使ってブログで解説したのも今回が初めてでした。

今回の解説はどうだったでしょうか。自分的にはやれるだけのことはやったのでそれなりに満足しています。

 

ご意見、ご感想等あれば、ぜひコメントをお願いします!

 

メールはこちらからお願いします。

jackal.jp128+blog@gmail.com

 

最後までお読みいただきありがとうございました。

これからも暮らしに役立つ情報や、ブロガーさん向けの記事などを書いていきます。

さようなら!!

 

参考サイト

www.workabroad.jp

 


f:id:jackal2801:20180206230703p:plain
登録してね