写真集めをしよう

こんにちは。なりです。

鍋がおいしい季節がきましたね~

もつ鍋にキムチ鍋…

鍋画像

いろんな鍋があります!

鍋は作るのも楽なので、大好きです!!

画像

今回はWebサイトで使用する画像について書いていきます。

印象的なWebサイトを作るためには

画像は必須ではないでしょうか。

画像について勉強したことをまとめていきたいと思います。

画像をどこで入手する??

画像を使いたいと思っても、

問題はどこで画像を入手するかです。

自分で撮った写真やイラストがある人はそれを使えばいいのですが、

すべての写真やイラストを全て自分で賄うのは

とても大変です!

それに私は写真を撮るための知識はありません。

希望にあった写真を撮ることは難しいです…

そうなると他の人が撮った写真やイラストを使いたい!となります。

そこで注意しないといけないのが…

著作権です!

インターネット上にある写真やイラストを無断で勝手に使ってはいけません。

著作権画像

お金を払ったり、

著作権者に許可をもらったり、

ちゃんとしないといけません。

無料画像サイト

今回のWeb制作で使用した画像は、

無料で商用利用可、クレジット表記しなくてもいいというサイトの

画像から探しました。

いくつかサイトを記載しておきます。

先生から教えていただいたサイトもあります。

本当にありがたいサイトです!!

画像の加工

サイトから使用したい画像をダウンロードしました。

しかし、そのまま使えるものもあれば

少し加工したいものもあります。

今回はPhotoshopを使って画像を加工しました。

その方法の一つを書いていきます。

完成図は↓

ケーキの写真を文字で切り抜いています。

作り方

1、べた塗のレイヤーを作る

色を自分で指定して

べた塗のレイヤーを作ります。

今回はピンク色にしました。

2、文字を作る

切り抜く文字を作ります。

今回は文字にドロップシャドウの効果をつけています。

また、文字の境界線にも色をつけています。

文字の色は黒でいいです。

3、切り抜きたい画像を準備する

文字の上のレイヤーに切り抜きたい画像をおきます。

文字が下になるので、

文字は見えなくなります。

この状態でクリッピングマスクをかければ完成です。

文字が切り抜かれます。

レイヤーの状態↓

以上で完成です。

デザインカンプ

他にも画像を準備したり、

ロゴを作ったりして、

デザインカンプが完成しました。

今回はPC用とスマホ用の2つです。

PC用

スマホ用

今日はここまでです。

次回はコーディングについて書きます。

ありがとうございました。

だんだん書くペースがつかめてきました!!

説明下手ですが、

少しづつ勉強したことや気づいたことを書いて

残していきたいと思います。