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

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

Avatar for keita keita
July 12, 2021
How-to & DIY
0
340

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

Avatar for keita

keita

July 12, 2021
Tweet

More Decks by keita

See All by keita
新田知事プレゼン資料.pdf
Avatar for keita keita_yoshikawa
0
27
富山デザイン勉強会_デザイン経営.pdf
Avatar for keita keita_yoshikawa
0
62
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
Avatar for keita keita_yoshikawa
0
160
富山デザイン勉強会_デザイントレンド2025.pdf
Avatar for keita keita_yoshikawa
0
360
アップロード職業訓練-デザインで使える写真撮影と画像補正.pdf
Avatar for keita keita_yoshikawa
0
96
アップロード職業訓練-誰でも使える写真撮影テクニックのコピー.pdf
Avatar for keita keita_yoshikawa
0
52
富山デザイン勉強会_私がデザインのために考えていること.pdf
Avatar for keita keita_yoshikawa
0
82
富山デザイン勉強会10-読む人を動かす_効果的な文章の書き方.pdf
Avatar for keita keita_yoshikawa
2
140
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
Avatar for keita keita_yoshikawa
0
220

Other Decks in How-to & DIY

See All in How-to & DIY
#Stampfly #M5Stack 開発ストーリーと今後の可能性 前説
Avatar for TAKASU Masakazu takasumasakazu
0
130
生成AIとミニ四駆で学ぶ！ MATLAB/Simulink
Avatar for Koichi Kobayashi covao
1
410
QFHアンテナを作ってみた、 それとパッチアンテナ
Avatar for takurx takurx
1
190
アイデアをカタチにする、イマジニア
Avatar for Haruka Iwasaki haruka_imgr
0
150
ミシンと刺繍とOSS
Avatar for godan godan
3
130
Raspberry Pi Connectを使って #Manus => Node-RED操作チャレンジ #iotlt vol121
Avatar for n0bisuke n0bisuke2
0
140
苦手の克服方法 / How to overcome weaknesses
Avatar for とうま toma_sm
0
280
中指立てたか判定IoT #iotlt #p5js
Avatar for n0bisuke n0bisuke2
0
310
スマートハウスの蓄電性能の効率化を実現してみた~電気自動車編~
Avatar for nanamin_iot runrunsan
0
250
ModuleLLM、最前線！
Avatar for anoken anoken
1
250
JAWS-UG Fukuoka - AWS re:Invent 2024 re:Cap AWS Community Perspective
Avatar for awsj communty program manager - Shigeru Numaguchi awsjcpm
2
180
Terra Charge｜急速充電器ご利用ガイドブック / Terra Charge Fast Charger Guidebook
Avatar for Terra Charge contents
1
430

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Done Done
Avatar for chrislema chrislema
185
16k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k

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