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
26
富山デザイン勉強会_デザイン経営.pdf
Avatar for keita keita_yoshikawa
0
61
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
Avatar for keita keita_yoshikawa
0
160
富山デザイン勉強会_デザイントレンド2025.pdf
Avatar for keita keita_yoshikawa
0
360
アップロード職業訓練-デザインで使える写真撮影と画像補正.pdf
Avatar for keita keita_yoshikawa
0
94
アップロード職業訓練-誰でも使える写真撮影テクニックのコピー.pdf
Avatar for keita keita_yoshikawa
0
51
富山デザイン勉強会_私がデザインのために考えていること.pdf
Avatar for keita keita_yoshikawa
0
81
富山デザイン勉強会10-読む人を動かす_効果的な文章の書き方.pdf
Avatar for keita keita_yoshikawa
2
130
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
Avatar for keita keita_yoshikawa
0
220

Other Decks in How-to & DIY

See All in How-to & DIY
AIをフル活用！ 猫版MBTI「CATS診断」 爆速開発の裏側【個人開発のAIツール活用 LT Night 登壇用スライド】
Avatar for Shogo Omori omori0219
0
1.1k
Nutanix Community Edition 超入門 25.04
Avatar for Yusuke Mizuta ricefield66
0
150
AWSと学生支援 - Education-JAWS #0
Avatar for awsj communty program manager - Shigeru Numaguchi awsjcpm
1
170
生成AIとミニ四駆で学ぶ！ MATLAB/Simulink
Avatar for covao / Koichi Kobayashi covao
1
400
Terra Charge｜普通充電器ご利用ガイドブック / Terra Charge Ordinary Charger Guidebook
Avatar for Terra Charge contents
1
360
AWSコミュニティプログラムと JAWS-UGアップデート / JAWS-UG函館 勉強会 vol.14
Avatar for awsj communty program manager - Shigeru Numaguchi awsjcpm
2
140
AWSコミュニティプログラムのご紹介　-グローバル展開するコミュニティプログラム-
Avatar for awsj communty program manager - Shigeru Numaguchi awsjcpm
0
190
わたしと技術コミュニティとキャリア
Avatar for ことみん / kotomin_m kotomin_m
2
1.7k
JAWS-UG 福岡 in 北九州 | JAWS-UG/AWSコミュニティ プログラムのご紹介
Avatar for awsj communty program manager - Shigeru Numaguchi awsjcpm
1
150
評価のギャップから紐解く、「評価軸」と「ソフトスキル」の重要性
Avatar for blajir blajir
2
100
安全に失敗するための手遊び-未定義動作を引き出そう-
Avatar for Hiroaki Kawase zilmina
0
650
JAWS-UG会津 & JP Stripes会津 合同勉強会 JAWS-UGとAWSコミュニティ プログラムアップデート
Avatar for awsj communty program manager - Shigeru Numaguchi awsjcpm
0
120

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
26
1.9k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k

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