ウェブデザインB 第13回 - ウェブデザインB | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザインB 第13回

まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「    」です。

前回はデザイン作業に進むための準備や全体およびブロック・ディテールのデザインの作り方のお話をしました。
今回は全体としてレクチャーする内容はありません前回までの情報を参考にしつつ、みなさんそれぞれのウェブサイトデザインに着手しましょう。
実際に「この表現をやってみたい」との要望に一つずつ応えていきたいと思っています。

残り3回4時間半あれば、納得のできるサイトデザインを完成させられるはずです。
今回は実習だけを行いますので、一緒に作り上げていきましょう!!

クリエイティブを楽しもう!

授業評価アンケート

少し時間を取り授業評価アンケートを行います。
なおこの科目は「ウェブデザインB」です。

授業評価アンケート

Photoshopの基本設定

Photoshopの基本設定から行いましょう。
まずはPhotoshopを起動し、前回途中まで制作して保存したPSDファイルを開きましょう。
ファイル名は「学籍番号-wire.psd」としていたかと思います。

プロでも使える素材サイト

私が普段使っていた素材サイトを紹介していきたいと思います。
チラシやバナー、Webサイト以外にも使用用途があるからぜひ覚えていってくださいね!
みんなの力になれば嬉しいです!!

プロでも使える素材サイト

上記のサイトから各素材をダウンロードして使うと簡単にクオリティアップができますが、
教室のPCはそのままだとデータが消えてしまうので、ドキュメントフォルダ内に入れるか、USBに残しておきましょう!
次開いた時に使えなくなっちゃったら困りますからね。

色々まとめ

ウェブデザイン制作に役立つ情報をまとめておきます。
使えそうな情報はあるかな??

ブロックやディテールなど細かい部分のデザイン表現の実現方法は・・・

[Photoshop]WebサイトのブロックやディテールのデザインパーツをPhotoshopで制作する方法

レイアウトに困ったら・・・

ウェブデザインの構築 レイアウト

配色に困ったら・・・

ウェブデザインの構築 配色

おしゃれなフォントを使いたかったら

参考URL;【商用利用可&日本語あり】 無料で使える! Google フォント を活用しよう! | Google Workspace 拡張の rakumo(ラクモ)

「どっちがいい?」に迷ったら・・・

UIデザイン・UXデザイン・ユーザビリティ

Photoshop・Illustratorの加工方法などは・・・

Photoshop | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM
Illustrator | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

本日のまとめ

これぞ実習です!やりたい表現を実現できないとき、そもそも何をすればいいのかが分からない時、そんな時にもそれ専用の教員が皆さんの目の前にいます(ワタシ)。

こうしたらいいんじゃない??のアドバイスも、こうしたらもっとよくなるよ!のアドバイスも、私の知りうる限りを伝えますので、どんどん教員をツールとしてスキル・クオリティアップにつなげてください!

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE