ちょびスタイル

ライフスタイル、仕事術、パソコンなどなど日常の気づいたことを記録します

*

PhotoshopとIllustratorを使ってヘッダーバナーを作成しました

      2019/03/17

futta1533m

このサイトのheaderの画像をずっと変えよう変えようと考えていたのですが、
なかなか取り掛かれずやっと実行しました。

ほんとデザインが苦手な私。
昔から図工や美術で褒められた試しなしなんです。
(つд⊂)


まず使うイラストを探して来ました。3つほど。


 

画像の加工ができる便利なWEBサービス

こちらでイラストに写真枠をつけることに。

結果

kako-R2vNVRphP2N4eOmJkako-6kHOyjqveGFxLPOikako-kqRJJ34g4W1EDWug
この3つを作りました。


背景のグラデーションを作ります。

Photoshopで作業開始

 

参考サイト:フォトショップで余白に溶け込むグラデーションをつくる|画像加工の便利帳

名称未設定-1

 

2.最初に背景のグラデーションのバナーを作り
先ほど作った写真枠をつけたイラストを貼り付けました。

多少縮小が必要でしたが、なんとか3つ貼り付け完了。
回転させることで、少し動きをつけてみたけど・・・。

とりあえず、これで背景のバナーは完成にしました。

文字を入れていきます。

今度はIllustratorで作業開始。
サイト名は、最近なんでもメモするようになってきたので
わかりやすく『MEMO-STYLE』で。
メモしても使えないと意味ないですから、ここで今後も使えるようにメモしていくようにします。
ついついなんでもevernoteに入れまくって整理できないので:(;゙゚’ω゚’):

参照サイト:イラストレーターで文字に縁取りを入れる方法

私の知りたい方法がバッチリ説明してくれていたので
簡単にできました。

文字に縁があるのとないのとでは全く見え方が違うのは知っていたので
なんとか縁取りはできました。

初めて真剣に作ったヘッダーバナーにしては、よろしいかと。(^-^)//””

画像の編集や加工は奥が深すぎて
まだまだ勉強したいことがたくさんありますね。

色の選び方とかが一番苦手そうな分野かな。
でも、インターネットさえ使えたら何でもチャレンジできそうです。

あ、本も買いたいなあ。

 - デザイン , , ,

スポンサーリンク

スポンサーリンク

follow us in feedly

  関連記事

アイコン、イラスト、バナー素材が豊富な無料素材配布サイト

ホームページやブログを運営するのに 写真やイラストなど画像を上手に使っていると …

和風テイストなカラーを使いたいときに参考になるWEBサイトまとめ

こんにちは。ちょびです。 よくあることなんですが、和風なイメージでサイトを作った …

キレイなゴシック日本語フリーフォントまとめ7選

こんにちは、ちょびです。 WEB上には様々なフリーで使えるフォントがあるんですが …

photoshop切り抜き方法で検索したところ参考にした13の記事
ブックマーク追加。キレイな写真を配布してくれている商用利用可能の写真素材サイト
ブックマーク。キレイな写真を配布してくれている商用利用可能の写真素材サイト

商用利用可能の素材サイトは見つけたらカテゴリ分けしてブックマークに追加しているの …

イラストレーターで同じイラストを等間隔に並べる方法

Illustratorを使っていて、 同じイラストを同じ間隔でまっすぐ並べる方法 …

夢中になりすぎ注意!作業につかれた時に無心で楽しめるWebサイト
夢中になりすぎ注意!作業につかれた時に無心で楽しめるWebサイト

「頭のなかがあれもこれもといっぱい、もう疲れたー」 という時に、遊び心をくすぐら …

高品質な紙の素材をダウンロードできるサイト

高品質な紙の質感がおしゃれな無料素材サイト「Paper-co」を紹介します。 紙 …

フリーのアイコンが見つかる [dhtml site]

      16✕16、24✕24、32✕32 な …

ブログ見栄えアップにも!オリジナル感満載の画像が簡単につくれるWEBツール「ImageChef]

  オリジナリティのある写真や画像を簡単に作成できるサイトを紹介します …

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です