まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
Sponsored Link
前回までデザイン制作を行い、ある程度のカタチができたかと思います。
いよいよ今回が最後のウェブデザインBです。
今回も全体としてレクチャーする内容はなく、これまでの情報を参考にしつつ、みなさんそれぞれのウェブサイトデザインで「この表現をやってみたい」との要望に一つずつ応えていきたいと思っています。
ラスト1回の1時間半、最後の仕上げをしていきましょう！！
この記事の目次
Photoshopの基本設定
Photoshopの基本設定から行いましょう。
まずはPhotoshopを起動し、前回途中まで制作して保存したPSDファイルを開きましょう。
ファイル名は「学籍番号-design.psd」としていたかと思います。
プロでも使える素材サイト
私が普段使っていた素材サイトを紹介していきたいと思います。
チラシやバナー、Webサイト以外にも使用用途があるからぜひ覚えていってくださいね！
みんなの力になれば嬉しいです！！
上記のサイトから各素材をダウンロードして使うと簡単にクオリティアップができますが、
教室のPCはそのままだとデータが消えてしまうので、ドキュメントフォルダ内に入れるか、USBに残しておきましょう！
次開いた時に使えなくなっちゃったら困りますからね。
色々まとめ
ウェブデザイン制作に役立つ情報をまとめておきます。
使えそうな情報はあるかな？？
デザインの見本をインプットしたいなら・・・
- 【S5-Style】Webデザインのリンク集・ポータルサイト
- 縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
- Web Design Clip | Webデザインクリップ
- WEBデザイン参考サイト bookma! v3
ブロックやディテールなど細かい部分のデザイン表現の実現方法は・・・
[Photoshop]WebサイトのブロックやディテールのデザインパーツをPhotoshopで制作する方法
[Photoshop] 調整レイヤー・塗りつぶしレイヤーで背景を作る
[動画解説]Illustratorを使った流体形シェイプの作り方
[動画解説]カーブしたブロックの作り方
レイアウトに困ったら・・・
配色に困ったら・・・
おしゃれなフォントを使いたかったら・・・
参考URL；【商用利用可＆日本語あり】 無料で使える！ Google フォント を活用しよう！ | Google Workspace 拡張の rakumo（ラクモ）
「どっちがいい？」に迷ったら・・・
Photoshop・Illustratorの加工方法などは・・・
Photoshop | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM
Illustrator | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM
最後の課題提出
では今までの授業で作り上げた皆さんのデザイン課題を提出しましょう。
課題の提出形式はjpg以外は受け付けられないようになっています。
必ずjpgに書き出して提出してください。
書き出しの手順は以下。
- 上部のメニューバーの「ファイル→書き出し→Web用に保存」の順にクリックする。
- 「Web用に保存」のダイアログボックスが出てきたら、
ボックス右上にある「プリセット」の右にあるプルダウンメニューを「JPEG標準」に変更。 - Web用に保存のボックス右下の「保存」ボタンをクリック。
- ファイル名を「学籍番号_デザイン」とし保存をクリック。
では下のフォームに、書き出したJPGを添付して送信してください。
なお提出期限は7/29（月）18時00分までとします。
本日のまとめ
最後のウェブデザイン制作はいかがでしたか？？
みなさんが満足のできるデザインは完成しましたか？
残念ながらこの15回の中で皆さんにレクチャーできる内容には限りがあります。
またセンスというものは「経験によって引き出しを増やす」作業です。
だから経験値の少ない今はうまくできなくても当然なのです。
しかし、テキストの中にはない私自身の経験による「本当にすべき作業」や、
「必要・不要の判断」は伝えることはできるはずです。
後期のウェブデザイン演習はPhotoshopやIllustratorでウェブや印刷物のトレース(模写)を行なって実務レベルでの技術を身につけ作品作りに活かします。
全15回お疲れ様でした。
