Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

D0ea52d36864ba36bdd5f8be4c0fcdb7?s=128

keita

July 12, 2021
Tweet

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 以上 ご清聴ありがとう ございました