Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
市民の先生_4写真素材と画像作成.pdf
Search
keita
July 12, 2021
How-to & DIY
360
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
市民の先生_4写真素材と画像作成.pdf
keita
July 12, 2021
More Decks by keita
See All by keita
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
keita_yoshikawa
0
110
富山デザイン勉強会_プレゼンテーション_swithimizu.pdf
keita_yoshikawa
0
45
富山デザイン勉強会29-伝わる資料-改訂版.pdf
keita_yoshikawa
0
30
富山デザイン勉強会_デザイン思考.pdf
keita_yoshikawa
2
200
富山デザイン勉強会_プレゼンテーション.pdf
keita_yoshikawa
0
190
富山デザイン勉強会_ブラッシュアップデザイン.pdf
keita_yoshikawa
0
140
富山デザイン勉強会_デザイントレンド2026.pdf
keita_yoshikawa
3
310
富山デザイン勉強会-配色が怖くなくなる_知識と理屈で考える配色.pdf
keita_yoshikawa
1
170
富山デザイン勉強会_デザイン経営.pdf
keita_yoshikawa
0
200
Other Decks in How-to & DIY
See All in How-to & DIY
放っておくと怖い睡眠負債について/fjordbootcamp-251122
yuukago
3
370
[JAWS DAYS 2026 | Track B] Local Roots, Global Reach
awsjcpm
0
140
JAWS-UG初心者支部 JAWS-UG Updates
awsjcpm
4
150
地域コミュニティって いいよね/Local Communities Are Pretty Great
aokiplayer
1
140
エッジで動くNode-REDを作る実験 #noderedjp #noderedcon
n0bisuke2
0
670
画面の向こうから「気づき」を得る 画面の向こうを「物差し」として捉える
subroh0508
1
470
JAWS-UG横浜100回記念 私のAWS ジャーニーと日本からみた横浜支部
awsjcpm
0
490
ATOMS3R-CAMとClaude SKILLSでタイムラプスチャレンジ #iotlt
n0bisuke2
0
450
10分de名コミュ “最高の自分”を演じ憧れの同業者と渡り合う
subroh0508
1
690
JAWS/AWS Community Updates - JAWS-UG新潟 #29
awsjcpm
1
170
フィールドエンジニア at 多摩川 / Field Engineer at Tamagawa
aokiplayer
0
430
地方カンファレンスのスタッフしてて思うこと
yumechi
0
280
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
142
7.7k
Google's AI Overviews - The New Search
badams
0
1.6k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
520
It's Worth the Effort
3n
188
29k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
470
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building AI with AI
inesmontani
PRO
1
1.3k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.5k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
290
First, design no harm
axbom
PRO
2
1.3k
Claude Code のすすめ
schroneko
67
230k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
550
Transcript
DERA-DESIGN 01 で ホームページを作ろう! #4写真素材と画像作成
DERA-DESIGN 02 画像によってホームページ のイメージが決まります 。 また、 情報を補足したり、 わかりやすくしたりする ことができます。 どうして画像を入れるのか?
</> Picture Illust BUTTON
DERA-DESIGN 03 画像 (写真/イラスト) の入手方法 ɾ素材 (有料/無料素材) ɾ作る (撮る/描く)
DERA-DESIGN 04 素材を使う
DERA-DESIGN 05 フリー素材とは? ホームページなどのデザ インに使ってよい、 写真や イラストです。 少し定義が 曖昧で、 必ずしも無料では
ありません。
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/ 無 料 フリー写真素材の入手先の一例
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/ 無 料 フリーイラスト素材の入手先の一例
DERA-DESIGN 08 画像を作る (加工する)
DERA-DESIGN 09 画像加工ソフト 色調を補正したり、 文字を 入れたりします。 有名なのはAdobe社です が、 高価なので気軽には使 いづらいʜʜ
10 DERA-DESIGN https//pixlr.com/jp/ PIXLR (ピクサー)
11 DERA-DESIGN PIXLRで文字を入れる
左のツールバーの 「テキストを追加」 を押す 左のツールバーの 「テキストを追加」 を押す DERA-DESIGN 12
テキストを追加のメニューから 「テキストの挿入」 を押す テキストを追加のメニューから 「テキストの挿入」 を押す DERA-DESIGN 13
テキストのスタイルを設定する テキストのスタイルを設定する DERA-DESIGN 14
DERA-DESIGN 15 WPで写真を使う
WP のダッシュボード→メディアライブラリ→新規追加 DERA-DESIGN 16
ファイルをドラッグ&ドロップorファイルを選択からアップロード DERA-DESIGN 17
アップロードした画像を選択 DERA-DESIGN 18
「画像を編集」 を押す DERA-DESIGN 19
右の 「画像縮尺の変更」 で画像の大きさを変更する 20 DERA-DESIGN
サムネイルでトリミング枠を表示する DERA-DESIGN 21
数値でもトリミング枠を設定できます DERA-DESIGN 22 DERA-DESIGN 22 ʹᑫ͞
保存します DERA-DESIGN 23
トリミングされた画像がライブラリに登録されました DERA-DESIGN 24
DERA-DESIGN 25 Lightningのメイン画像を変えてみる
WP のダッシュボード→外観→カスタマイズ→スライドショー WP のダッシュボード→外観→カスタマイズ→スライドショー DERA-DESIGN 26
メニュー→スライド画像→画像を変更 メニュー→スライド画像→画像を変更 DERA-DESIGN 27
メディアライブラリから画像を選択する DERA-DESIGN 28
画像の上のテキストやボタンのリンクなどを設定する 画像の上のテキストやボタンのリンクなどを設定する DERA-DESIGN 29
公開を押して変更完了 公開を押して変更完了 DERA-DESIGN 30
DERA-DESIGN 31 ɾ画像は素材を使うと効率的 ɾ画像加工はフリーソフトでも可能 (プロを目指すならAdobeは必須) ɾWordPress上でもトリミングはできる まとめ
DERA-DESIGN 32 以上 ご清聴ありがとう ございました