実践Webデザインスキル - 第3章 Lesson3

第三回:無料のアイコンを使ってロゴを配置してみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

無料のアイコンを使ってロゴを配置してみましょう。



この動画で学べること

・アイコンを使ったロゴの作成方法



アイコンを配置しよう

Webサイトのロゴを作りますが、まずはアイコンの表示をしていきましょう。
メニューバーのファイルから、埋め込みを配置に進み、画像を選択して配置をクリックします。
配置ができたら、オプションバーの◯(まる)を押して、配置の確定をします。
移動ツールに切り替えて画像をロゴの位置に移動させ、再度バウンディングボックスを表示させます。
そして、ボックスのつまみを動かして大きさの調整をしていきます。


配置や大きさを調整できたら、アイコンの色を変更しましょう。
今回は、シェイプではないので色の変更ができないため、レイヤースタイルのカラーオーバーレイから色を青色にしていきます。




ロゴの文字をデザインしていこう

テキストツールに切り替えて、「まごころと優しさを大切に ネストクリニック」と入力します。
今回は、上の段と下の段で違うスタイルをかけたいので、
文字の入力モードに入った状態で、変えたい文字だけドラッグして選択し、編集していきます。
フォントの種類、大きさ、太さ、行間などを調整すれば、ロゴのテキストが完成です。


最後にアイコンと文字の余白を調節し、このようなロゴができあがりました。