ちょびスタイル

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

*

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

  関連記事

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

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

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

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

気分を変えてくれる 見るだけでも楽しい無料で使える壁紙サイト

PC作業ばかりしていると、なんとなく疲れてしまいます。 同じ画面ばかり見ていては …

画像の切り抜きが簡単にできるWEBツール「Clipping Magic」
画像の切り抜きが簡単にできるWEBツール「Clipping Magic」

写真などの加工や編集をするとき、背景をなくしたかったり、 いろいろ要望がでてくる …

開いているWEBページを簡単に画像として保存する方法
開いているWEBページを簡単に画像として保存する方法

ブログをしていたり、ホームページを作っていたりすると 特定のサイトを画像化して保 …

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

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

無料写真素材
見てるだけでも楽しい。お気に入り商用利用可能のフリー写真素材配布サイト

ブログを更新する上でフリーの写真素材配布サイトをいろいろ回りますが、 その中でも …

オリジナルのファビコンを簡単に作成できるツール2選
オリジナルのファビコンを簡単に作成できるツール2選

ファビコンを使うと、サイトのイメージが湧きやすいですよね。 分かりやすいオリジナ …

これは便利!ブログに使えるフリーの写真の検索時間を短縮できるサイト3選
これは便利!ブログに使えるフリーの写真素材の検索時間を短縮できるサイト3選

ブログを更新するのに、写真をつける作業は一連の流れの一つにしていますが、 フリー …

商用利用可能な無料写真素材サイト5選
商用利用可能な無料写真素材サイト5選

ホームページやブログを作成するにあたって、 見映えなどを考えると、写真などがある …

Message

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