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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for keita keita
July 12, 2021
How-to & DIY
350
0

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

Avatar for keita

keita

July 12, 2021

More Decks by keita

See All by keita
富山デザイン勉強会_プレゼンテーション_swithimizu.pdf
Avatar for keita keita_yoshikawa
0
0
富山デザイン勉強会29-伝わる資料-改訂版.pdf
Avatar for keita keita_yoshikawa
0
1
富山デザイン勉強会_デザイン思考.pdf
Avatar for keita keita_yoshikawa
1
62
富山デザイン勉強会_プレゼンテーション.pdf
Avatar for keita keita_yoshikawa
0
80
富山デザイン勉強会_ブラッシュアップデザイン.pdf
Avatar for keita keita_yoshikawa
0
82
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
3
230
富山デザイン勉強会-配色が怖くなくなる_知識と理屈で考える配色.pdf
Avatar for keita keita_yoshikawa
1
110
新田知事プレゼン資料.pdf
Avatar for keita keita_yoshikawa
0
71
富山デザイン勉強会_デザイン経営.pdf
Avatar for keita keita_yoshikawa
0
160

Other Decks in How-to & DIY

See All in How-to & DIY
AWS Summit Japan 2025 個人的参加レポート
Avatar for midnight480 midnight480
0
400
5年間ぐらい、 スプリントレトロスペクティブは、
「+/Δ」しかしてないので、
あらためて良いのか悪いか考えてみる　/ Doing Plus Delta for about five years
Avatar for おおひら camel_404
1
440
JAWS-UG/AWSコミュニティプログラムのご紹介 (JAWS-UG広島)
Avatar for awsj communty program manager - Shigeru Numaguchi awsjcpm
1
150
SoracomUG-Ishikawa-1.pdf
Avatar for yukima77 yukima77
0
210
令和なのでVoIP網に参加して電話サービスを作ってみた話
Avatar for CIB-MC cibmc
0
130
JAWS-UG初心者支部 JAWS-UG Updates
Avatar for awsj communty program manager - Shigeru Numaguchi awsjcpm
4
130
画面の向こうから「気づき」を得る　画面の向こうを「物差し」として捉える
Avatar for subroh_0508 subroh0508
1
330
ATOMS3R-CAMとClaude SKILLSでタイムラプスチャレンジ #iotlt
Avatar for n0bisuke n0bisuke2
0
290
地方カンファレンスのスタッフしてて思うこと
Avatar for yumechi(Motoki Hirao) yumechi
0
220
JAWS-UG と AWS - JAWS-UG 沖縄 Cloud on the Beach 2025
Avatar for awsj communty program manager - Shigeru Numaguchi awsjcpm
0
160
M5StickS3触ってXiaoZhiAI触ってみた #にぼし香 #iotlt
Avatar for n0bisuke n0bisuke2
0
260
ライブ感を生む 巻き込み型スライドの作り方/Create your slide like a heavy metal concert
Avatar for 小田中育生 ikuodanaka
5
1.6k

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
330
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
610
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
390
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
250
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
9k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
190
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
480

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