タグ: Photoshop

2023年3月10日 コメントする

3月10日（金）－レイアウトデザイン基礎①/ワイヤーフレーム

制作のポイント

情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。

メモ

【先生より、コーディング系おすすめサイト】
・coliss
・MDN Web Docs
・PhotoshopVIP

【作業について】
・先生は、ワイヤーフレームを印刷したら手書きでpxなど書き込み、横に置いて見ながら作業するのがおすすめとのこと
・本は、このサイトを作ってみましょうのような本より、CSSサンプル集のような「このCSSでこんなことができます」というようなサンプルが羅列された本がよい
※そこまで頻繁には内容は変わらないけど、数年前とかの本だと情報が古く今のHTML・CSSのバージョンに追い付いていない場合があるので、なるべく現行のバージョンに対応した本を選ぶ

Photoshopでのワイヤーフレーム制作

【パターン1】
①新規作成→横960px×縦3000pxくらい（増えてOK）、解像度72、RGB、カンバスカラー白、アートボードの☑外す⇒OK
②イメージタブ→カンバスサイズ→幅1280px、カンバスカラー：薄いグレーなどわかりやすい色→OK
③高さが足りなくなったら、カンバスサイズ→基準点を↑に調整して、高さを増やす
④普通に長方形ツールなどで白い部分を増やして作業

【パターン2】こっちのがやりやすいかも
①新規作成→横1280px×縦3000pxくらい、解像度72、RGB、カンバスカラー：薄いグレーなど、アートボードの☑外す⇒OK
②薄いグレー+真ん中白でふたつ長方形ツールで背景作る
③長さが足りなくなったら、カンバスサイズの変更後に②の2つをそれぞれプロパティで高さ変えるだけでOK

Photoshopでのガイド引き方

定規から引っ張ってくるとぴったり希望の位置に置くのが難しい
↓
表示→ガイド→ガイドを新規作成→横線：水平方向、縦線：垂直方向でぴったり作れる

・ガイドが不要になったら、移動ツールでガイドを定規まで入れ込めば消える
・【ctrl+：】でガイドの表示・非表示切り替えができる
・【ctrl+0】で全体表示、【ctrl+1】で100％表示できる

2023年2月7日 コメントする

2月7日（火）－ECサイトデザイン実習④バナー制作

メモ

・バナー作成の作業中、文字がジャギジャギするので、作業中は150dpiで、別名保存で72dpiで書き出しでもOKとのこと（必ず別名保存後に、イメージタブ→画像解像度で変更）

【アートボードごとに書き出しする方法】
・新規ファイル作成時、「方向」横のアートボードにチェックを入れておくと増やしやすい
↓
◆「アートボード」文面クリックで増やして、プロパティでサイズ変更
or
◆レイヤーパネル右上メニュー→「アートボード追加」

【サイズ違いのバナー作成する際】
・大きいバナーから作成して、小さいバナーを作成していくと、情報をそぎ落としていく感じで作業しやすい

オリジナルバナー作成練習（サイズ違い）

使用ソフト｜Photoshop（作業時間：約180分）

750px × 290px
250px × 250px
320px × 100px
320px × 50px
120px × 600px

▼借用元元画像
・コピック アルコールインクアートセット商品ページ
https://gtoo-event.com/hobby2020/item/20210112-135900.html

・アルコールインクアート素材（写真AC）
https://www.photo-ac.com/main/detail/3876852?title=%E3%82%A2%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%AB%E3%82%A4%E3%83%B3%E3%82%AF%E3%82%A2%E3%83%BC%E3%83%88

https://www.photo-ac.com/main/detail/24132816?title=%E3%82%A2%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%AB%E3%82%A4%E3%83%B3%E3%82%AF%E3%82%A2%E3%83%BC%E3%83%88%20%E6%B0%B4%E5%BD%A9%20%E3%82%B0%E3%83%AA%E3%83%83%E3%82%BF%E3%83%BC

2023年2月4日 コメントする

2月4日（土）－ECサイトデザイン実習③バナー制作

メモ（仕事での制作物提出について）

（先生の場合）
・ラフを出すときにはイラレやフォトショではなく、ExcelやXDを使用した簡素な配置メモを渡すとのこと（文言などが決まっているときは入れ込む）
・その際には文字の大きさ、スタイルなども考えて清書直前の配置メモにする

・参考画像で、DLしたバナーなども添えて説明している（競合他社のバナーでも、理由を添えて）
例：「このレイアウトのバナーですが、調査したところ売上が上がっているようで、サイトTOPにもありましたので、似た雰囲気で作成しました」など

オリジナルバナー作成練習（埋め込み）

使用ソフト｜Photoshop（作業時間：約160分）

埋め込みで並べた際に浮かないよう、書体や文字色などを合わせました。
ぼんやり発光する感じでくらげのイラスト（パス）を入れて、ふわふわ感を出すために円弧と、メインタイトルはゆらゆら漂うイメージで波形フィルターを使用しました。

▼借用元元画像
・サンシャイン水族館（スクリーンショット）
https://sunshinecity.jp/aquarium/

・くらげ素材（写真AC）
https://www.photo-ac.com/main/detail/24764880?title=%E3%82%AF%E3%83%A9%E3%82%B23

他バナーの雰囲気に合うようにシンプルな配置にしました。
テーブル素材はそのままだときつく感じたので、雰囲気に合うよう白基調にして、遠近法ツールで食器の角度に合わせ、ドロップシャドウやブラシで影を付け足しました。

▼借用元元画像
・KEYUCA（特集一覧ページスクリーンショット）
https://www.keyuca.com/shopping/user_data/special.php

・KEYUCA　離乳食皿
https://www.keyuca.com/shopping/products/detail.php?product_id=43576&category_id=552

・テーブル素材（写真AC）
https://www.photo-ac.com/main/detail/25195459?title=%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E6%9C%A8%E7%9B%AE

2023年2月2日 コメントする

2月2日（木）－ECサイトデザイン実習②バナー制作

デザイン素材の権利について

バナーなどの制作物のデータは、当然二次利用が可能です。データ納品となる場合は権利やデータの内容などの事から、価値が変わります。
初期の契約内容や会社での方針などしっかり確認しデータのやり取りをしましょう。

【実際仕事する際、要確認】参考サイト

・デザインの著作権は、デザイナーと依頼者どちらにあるのか？譲渡はできるのか？ | デザインのコト。
・デザイナーが知っておくべき「法律」の基礎知識。商標、著作権、特許の違い、知ってる？ | キャリアハック
・デザインデータは無償で渡すべき？デザインの著作権とデータ譲渡の対策について考えてみた | MTFC

オリジナルバナー作成練習

使用ソフト｜Photoshop（作業時間：約160分）

▼借用元元画像
・チョコレート（楽天市場）
https://item.rakuten.co.jp/morozoff/1865/

・リボン（写真AC）
https://www.photo-ac.com/main/detail/25143983?title=%E3%82%AE%E3%83%95%E3%83%88_%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8

2023年2月1日 コメントする

2月1日（水）－ECサイトデザイン実習①バナー制作

・フリー素材でもルールがあるので、使用するときに都度確認
　以前使用したものでもルール変更している可能性があるので、毎回確認

・授業の練習は参考画像のURL（+TOPなどどこかに謝辞）載せていればOK（営利目的ではないのでグレーゾーン）の認識でよいとのこと

バナー練習作品

使用ソフト｜Photoshop（作業時間：約160分）
模写と商品入れ替え（左側参考画像／右側作成画像）

▼借用元元画像
◆【午後の紅茶】バナー（参考画像／BANNER LIBRARY）
https://design-library.jp/14961
・日本地図（差し替え素材／写真AC）
https://www.photo-ac.com/main/detail/4067906?title=%E6%97%A5%E6%9C%AC%E3%81%A8%E3%83%8F%E3%83%BC%E3%83%88%E3%81%A8%E9%9B%BB%E5%8D%93

▼借用元元画像
◆【名古屋のそば特集】バナー（参考画像／BANNER LIBRARY）
https://design-library.jp/15045
・うどん（差し替え素材／写真AC）
https://www.photo-ac.com/main/detail/3499116?title=%E3%81%96%E3%82%8B%E3%81%86%E3%81%A9%E3%82%93

https://www.photo-ac.com/main/detail/3499113?title=ざるうどん

https://www.photo-ac.com/main/detail/25318632?title=%E3%81%8D%E3%81%A4%E3%81%AD%E3%81%86%E3%81%A9%E3%82%93

2023年1月27日 コメントする

1月27日（金）－ECサイトデザイン基礎②サムネイル

Photoshopでアートボードを並べる方法（見本を横に置く場合など）

①ファイル新規作成
例）楽天サムネイルなら275×275pxなので、アートボードは500×500pxとかで作成

②見本ファイルを配置or貼り付け、レイヤーに透過部分ある場合は塗りつぶしレイヤーなどとレイヤー統合して右クリック→【レイヤーからのアートボード】

③上部に「アートボード1」と出るのでクリック→アートボードの周りに＋マークが出るので、追加したい位置の＋をクリックでアートボードが追加される

Photoshopメモ

・トーンカーブは基本S字のグラフにすると綺麗に見えやすい、慣れない内はトーンカーブよりレベル補正が簡単

・レベル補正（トーンカーブ）などの色調補正はレイヤー全体にかかる？ので、大体の場合は画像をもらった最初の時点でやっておいてから、それを使って作業していく方がいいとのこと
※当たり前だけど、プロの写真家の写真などは加工しないこと（常識的に）

ポートフォリオメモ

・バナーやサムネイルの模写などは「模写しました」と添えて、比較画像や借用元記載で載せてOK
・「このデザインのあしらいの意味は～です」のような感じで工夫した点を添えるといいとのこと（田中先生より）

楽天サイズサムネイル練習作品

使用ソフト｜Photoshop（作業時間：約180分）
模写と商品入れ替え（左側参考画像／右側作成画像）

工夫点：ワンピースのカラーバリエーションの調整を色相で調整し、ワンピース・モデルにドロップシャドウで影をつけて存在感を出しました。
「1kg」の文字やロゴマークの金色に輝く感じをグラデーションで調整し、「1kg」は2重に境界線縁取りに加えて後ろに黄色のシェイプを置きました。
また、先生にアドバイスいただき「オホーツク産」を太字に、「ホタテ玉冷大」の文字間隔を調整しました。

▼借用元元画像
◆大人の楽ちんワンピース（参考画像）
https://item.rakuten.co.jp/outletruckruck/wfs01077/

◆お肉（参考画像）
https://item.rakuten.co.jp/f413275-yoshinogari/fbx001/
・ホタテ（差し替え素材）
https://www.photo-ac.com/main/detail/3917766?title=%E5%B8%86%E7%AB%8B%E8%B2%9D%E6%9F%B1%E3%81%AE%E5%88%BA%E8%BA%AB

◆すらっと上品見え　大人のキャミワンピ（参考画像）
https://item.rakuten.co.jp/galstar/120799/
・背景（差し替え素材）
https://www.photo-ac.com/main/detail/23415310
・チェスト（差し替え素材）
https://www.photo-ac.com/main/detail/22881708



2023年1月25日 コメントする

1月25日（水）－ECサイトデザイン基礎①サムネイル

※デザインの教科書⑤参照
（以下は教科書外のメモ）

・サムネイルはバナーよりも消費され簡単なものが多いので、1個40分くらいの作業時間が理想

・サムネイルは小さく表示されるが、表示の2倍くらいの大きさで作業し、最後にリサイズすると良いとのこと
例：楽天のサムネイルサイズ275×275px、作業時は最低500×500px以上にする

・授業ではBtoC（Business＝企業、Customer＝客）を想定したバナー作り

・ランサーズやココナラなどで副業する場合も安いので、サクサク作業できるようにする

・文字だけのバナーはイラレが便利だが、画像＝フォトショ→文字・レイアウト＝イラレとデータを移していく時間がロスなので、できればフォトショで完結させる方が良いとのこと（サムネイルは簡単なものが多いので）

・バナーは規約あまりない（バナーは競合他社と羅列されず単体や自社ページで表示されるもの。サムネイルはバナーの一種だが検索などで競合他社と羅列されるものなので、極端に目を引くなどの画像は禁止されている。）

・ECサイトの求人は「WEBデザイナー」より「販売業」のカテゴリーで求人掲載されていることも多いとのこと

サムネイル画像の規約

・サムネイルはECモールにより規約があるのでよく読む
・Amazon＞楽天くらいでAmazonの方が規約が厳しい

例）楽天　参考サイト
・楽天のサムネイル作成には注意？ガイドラインの詳細と罰則も紹介 | ピュアフラット
・【保存版】楽天「商品画像登録ガイドライン」対応！実例付き24の対策まとめ | コマースデザイン
先生より、楽天は基本合成NG（色違いや商品展開画像、会社ロゴはOK）、撮ったままの背景か、切り抜き白背景か白基調の背景、枠も囲みはもちろん、L字（2線）もアウトで1線もアウト寄りグレー（まったく同じ商品を並べてライン風にするのも×）とのこと

2023年1月24日 コメントする

1月24日（火）－Photoshop練習

練習作品

使用ソフト｜Photoshop（作業時間：約30分）
写真のアザラシが三角から飛び出るように画像を作ってみました。

▼借用元元画像
・至福の顔でお昼寝中のアザラシ１ – No: 24991833｜写真素材なら「写真AC」無料（フリー）ダウンロードOK

練習作品

使用ソフト｜Photoshop（作業時間：約30分）
シルエットを使った画像を作ってみました。
・五重塔のシルエット切り抜き、侍の写真レタッチ
・五重塔でクリッピングマスク
・レイヤー効果とブラシで色調補正

▼借用元元画像
・日没と浅草寺の五重塔のシルエットの写真素材 – ぱくたそ
・迫りくる灰色の雲と侍の後ろ姿の写真素材 – ぱくたそ

2023年1月23日 コメントする

1月23日（月）－ECサイト運用基礎②バナー/レイヤー効果

参考サイト

・Photoshopのレイヤースタイルの使い方【全種類一覧解説】 | 321web
・【Photoshop】描画モードの基本と効果的な使い方 | デザナビ
・Photoshop で塗りつぶしツールを利用して色を変更する方法 | IT/Web 総合情報サイト – Webolve

レイヤー効果

・レイヤー右クリック→レイヤー効果→ドロップシャドウ（影）や境界線（切り抜いた写真や文字にふちどり）など付けられる
（または、【fx】からもOK）

・レイヤー一枚一枚は面倒なので、レイヤーグループにして一括で効果をつけると楽

・Photoshopのオブジェクト（シェイプ？）は後から色を変更するのが大変なので、【カラーオーバーレイ】または【グラデーションオーバーレイ】を使うと楽とのこと
→プロパティから色変更できるっぽい

例）ドロップシャドウ

レイヤー効果【応用】外枠の作り方

新規レイヤー作成→バケツで何色でもいいので塗りつぶし→レイヤー効果→【境界線】→内側・塗りをなしで線のみにすればOK

バナー【メモ】

・1時間1個での作成が目標
・文字のみのバナー練習がある程度済んだら画像付きバナー模写の練習
・白黒で配置してから色をつけるとイメージしやすいとのこと
・Photoshopで文字の一部を消す場合、レイヤーマスクで黒で塗りつぶせばOK
・Photoshopで文字幅を【B】以上に太くする場合、レイヤー効果【境界線（外側）】で太くできる
・Photoshopで文字をふちどる場合、レイヤー効果【境界線】で外側or内側設定、+文字色を変更すればOK

文字のみバナーの模写練習作品

使用ソフト｜Photoshop（作業時間：約150分）
3つ目の画像はボーダーの背景がうまくできなかったため、パターンで修正しました。
参考サイト：【かんたん】Photoshopで斜めのストライプを作る方法 | ゆずゆろぐ。

▼借用元元画像（BANNER LIBRARY）
1枚目：https://design-library.jp/10108
2枚目：https://design-library.jp/12771
3枚目：https://design-library.jp/13069
4枚目：https://design-library.jp/11946

パターン【応用】

ストライプのパターンを文字で試してみました。（Photoshop）
黄色の文字色→・パターンオーバーレイ（ピンクのストライプパターン）
　　　　　　　・境界線（赤色で外側2px）
　　　　　　　・ドロップシャドウ（暗い赤色）