市民の先生_4写真素材と画像作成.pdf

Transcript

1. DERA-DESIGN 01 で ホームページを作ろう! #4写真素材と画像作成

2. DERA-DESIGN 02 画像によってホームページ のイメージが決まります 。 また、 情報を補足したり、 わかりやすくしたりする ことができます。 どうして画像を入れるのか？

   </> Picture Illust BUTTON

3. DERA-DESIGN 03 画像 （写真/イラスト） の入手方法 ɾ素材 （有料/無料素材） ɾ作る （撮る/描く）

4. DERA-DESIGN 04 素材を使う

5. DERA-DESIGN 05 フリー素材とは？ ホームページなどのデザ インに使ってよい、 写真や イラストです。 少し定義が 曖昧で、 必ずしも無料では

   ありません。

6. DERA-DESIGN 06 ピクスタ　https//pixta.jp/ 123RF　　 https//jp.123rf.com/ アマナ https//amanaimages.com/ 有　料 写真AC https//www.photo-ac.com/

   ぱくたそ　https//www.pakutaso.com/ 足成　　　http//www.ashinari.com/ 無　料 フリー写真素材の入手先の一例

7. DERA-DESIGN 07 ピクスタ　 https//pixta.jp/ freepik　 https//jp.freepik.com/ ココナラ https//coconala.com/ 有　料 イラス

   トAC https//www.ac-illust.com/ アイコーン https//icooon-mono.com/ いらすとや　 https//www.irasutoya.com/ 無　料 フリーイラスト素材の入手先の一例

8. DERA-DESIGN 08 画像を作る （加工する）

9. DERA-DESIGN 09 画像加工ソフト 色調を補正したり、 文字を 入れたりします。 有名なのはAdobe社です が、 高価なので気軽には使 いづらいʜʜ

10. 10 DERA-DESIGN https//pixlr.com/jp/ PIXLR （ピクサー）

11. 11 DERA-DESIGN PIXLRで文字を入れる

12. 左のツールバーの 「テキストを追加」 を押す 左のツールバーの 「テキストを追加」 を押す DERA-DESIGN 12

13. テキストを追加のメニューから 「テキストの挿入」 を押す テキストを追加のメニューから 「テキストの挿入」 を押す DERA-DESIGN 13

14. テキストのスタイルを設定する テキストのスタイルを設定する DERA-DESIGN 14

15. DERA-DESIGN 15 WPで写真を使う

16. WP のダッシュボード→メディアライブラリ→新規追加 DERA-DESIGN 16

17. ファイルをドラッグ＆ドロップorファイルを選択からアップロード DERA-DESIGN 17

18. アップロードした画像を選択 DERA-DESIGN 18

19. 「画像を編集」 を押す DERA-DESIGN 19

20. 右の 「画像縮尺の変更」 で画像の大きさを変更する 20 DERA-DESIGN

21. サムネイルでトリミング枠を表示する DERA-DESIGN 21

22. 数値でもトリミング枠を設定できます DERA-DESIGN 22 DERA-DESIGN 22 ৘ʹᑫ͞

23. 保存します DERA-DESIGN 23

24. トリミングされた画像がライブラリに登録されました DERA-DESIGN 24

25. DERA-DESIGN 25 Lightningのメイン画像を変えてみる

26. WP のダッシュボード→外観→カスタマイズ→スライドショー WP のダッシュボード→外観→カスタマイズ→スライドショー DERA-DESIGN 26

27. メニュー→スライド画像→画像を変更 メニュー→スライド画像→画像を変更 DERA-DESIGN 27

28. メディアライブラリから画像を選択する DERA-DESIGN 28

29. 画像の上のテキストやボタンのリンクなどを設定する 画像の上のテキストやボタンのリンクなどを設定する DERA-DESIGN 29

30. 公開を押して変更完了 公開を押して変更完了 DERA-DESIGN 30

31. DERA-DESIGN 31 ɾ画像は素材を使うと効率的 ɾ画像加工はフリーソフトでも可能 　 （プロを目指すならAdobeは必須） ɾWordPress上でもトリミングはできる まとめ

32. DERA-DESIGN 32 以上 ご清聴ありがとう ございました