Tweet
Tweet

Slide 1

Slide 1 text

DERA-DESIGN 01 で ホームページを作ろう! #4写真素材と画像作成

Slide 2

Slide 2 text

DERA-DESIGN 02 画像によってホームページ のイメージが決まります 。 また、 情報を補足したり、 わかりやすくしたりする ことができます。 どうして画像を入れるのか？ > Picture Illust BUTTON

Slide 3

Slide 3 text

DERA-DESIGN 03 画像 （写真/イラスト） の入手方法 ɾ素材 （有料/無料素材） ɾ作る （撮る/描く）

Slide 4

Slide 4 text

DERA-DESIGN 04 素材を使う

Slide 5

Slide 5 text

DERA-DESIGN 05 フリー素材とは？ ホームページなどのデザ インに使ってよい、 写真や イラストです。 少し定義が 曖昧で、 必ずしも無料では ありません。

Slide 6

Slide 6 text

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/ 無　料 フリー写真素材の入手先の一例

Slide 7

Slide 7 text

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/ 無　料 フリーイラスト素材の入手先の一例

Slide 8

Slide 8 text

DERA-DESIGN 08 画像を作る （加工する）

Slide 9

Slide 9 text

DERA-DESIGN 09 画像加工ソフト 色調を補正したり、 文字を 入れたりします。 有名なのはAdobe社です が、 高価なので気軽には使 いづらいʜʜ

Slide 10

Slide 10 text

10 DERA-DESIGN https//pixlr.com/jp/ PIXLR （ピクサー）

Slide 11

Slide 11 text

11 DERA-DESIGN PIXLRで文字を入れる

Slide 12

Slide 12 text

左のツールバーの 「テキストを追加」 を押す 左のツールバーの 「テキストを追加」 を押す DERA-DESIGN 12

Slide 13

Slide 13 text

テキストを追加のメニューから 「テキストの挿入」 を押す テキストを追加のメニューから 「テキストの挿入」 を押す DERA-DESIGN 13

Slide 14

Slide 14 text

テキストのスタイルを設定する テキストのスタイルを設定する DERA-DESIGN 14

Slide 15

Slide 15 text

DERA-DESIGN 15 WPで写真を使う

Slide 16

Slide 16 text

WP のダッシュボード→メディアライブラリ→新規追加 DERA-DESIGN 16

Slide 17

Slide 17 text

ファイルをドラッグ＆ドロップorファイルを選択からアップロード DERA-DESIGN 17

Slide 18

Slide 18 text

アップロードした画像を選択 DERA-DESIGN 18

Slide 19

Slide 19 text

「画像を編集」 を押す DERA-DESIGN 19

Slide 20

Slide 20 text

右の 「画像縮尺の変更」 で画像の大きさを変更する 20 DERA-DESIGN

Slide 21

Slide 21 text

サムネイルでトリミング枠を表示する DERA-DESIGN 21

Slide 22

Slide 22 text

数値でもトリミング枠を設定できます DERA-DESIGN 22 DERA-DESIGN 22 ৘ʹᑫ͞

Slide 23

Slide 23 text

保存します DERA-DESIGN 23

Slide 24

Slide 24 text

トリミングされた画像がライブラリに登録されました DERA-DESIGN 24

Slide 25

Slide 25 text

DERA-DESIGN 25 Lightningのメイン画像を変えてみる

Slide 26

Slide 26 text

WP のダッシュボード→外観→カスタマイズ→スライドショー WP のダッシュボード→外観→カスタマイズ→スライドショー DERA-DESIGN 26

Slide 27

Slide 27 text

メニュー→スライド画像→画像を変更 メニュー→スライド画像→画像を変更 DERA-DESIGN 27

Slide 28

Slide 28 text

メディアライブラリから画像を選択する DERA-DESIGN 28

Slide 29

Slide 29 text

画像の上のテキストやボタンのリンクなどを設定する 画像の上のテキストやボタンのリンクなどを設定する DERA-DESIGN 29

Slide 30

Slide 30 text

公開を押して変更完了 公開を押して変更完了 DERA-DESIGN 30

Slide 31

Slide 31 text

DERA-DESIGN 31 ɾ画像は素材を使うと効率的 ɾ画像加工はフリーソフトでも可能 　 （プロを目指すならAdobeは必須） ɾWordPress上でもトリミングはできる まとめ

Slide 32

Slide 32 text

DERA-DESIGN 32 以上 ご清聴ありがとう ございました