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

WEBCRE8TOR.COM

ウェブデザインB 第15回

webdesignb15

ウェブデザインBもいよいよ今回で最終回です。

今回も前回に引き続き、ページデザインのテイスト別の特徴バナーデザインの内容の情報を元に、実際にバナーの制作を行ないましょう。前回制作した「バナーデザイン制作課題A」を引き続き制作・提出します。

Photoshopの基本設定

基本設定から行いましょう。まずはPhotoshopを起動してください。

Photoshopを起動し、基本設定が完了したら、
前回制作した「バナーデザイン制作課題A.psd」を開き
先週の課題作業の続きを行ないましょう

バナーデザインのために役立つ情報

制作の工程と課題の要件

まずはバナーデザイン制作の工程と、今回のバナーデザイン課題の要件を振り返りましょう。

今回の「今すべきこと」が明確になると思います。

参考サイト

先週も掲載しましたが、参考アーカイブから見本となるデザインを探しておきましょう。
以下の記事にまとめています。

クオリティの高いバナーデザインをアーカイブしている2つの厳選Webサイト。 – ブログ | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

実は、参考デザインを探す理由はバナーデザインの参考のためだけではありません。
みなさんが自分自身で自分のやりたい表現を見つける必要があるからです。
そして以下に収集しまとめた情報のような表現の実現方法を探すという工程を行う必要があります。

Photoshopのチュートリアルまとめ

ここではPhotoshopを使用する上で役立つページのリンクを掲載していきます。
今回のようなバナーデザインだけではなく、ウェブサイトのページデザインにも役立つ情報です。

Photoshopはとても多機能なツールですが、多機能であるがゆえにどうやって使えばいいのかがわからなくなってしまいます。でも実際に使うのは本当に必要な機能だけで、ウェブサイト制作においては特別な機能はほとんど使いません

ほとんど使わない機能を説明しても仕方がないので、実際に使う機能のみに絞って解説します。
そしてそれは「これがしたい」という意欲と調べる手間さえあればすぐに覚えられます。

やりたい表現がある場合、どうすれば実現できるのか??に困ったら、
ウェブ検索で調べると以下のようなページを見つけることができますよ。
(例:Google検索で「photoshop テキスト グラデーション」などなど)

オブジェクトや文字レイヤーに魔法をかける!レイヤー効果

シェイプツール

フォトレタッチしてみよう!

調整レイヤーと塗りつぶしレイヤー

課題の提出

では課題の提出を行います。まずは提出用にjpgで書き出しましょう。
手順は以下。

  1. 上部のメニューバーの「ファイル」→「書き出し」→「Web用に保存」
  2. Web用に保存のウィンドウが出てきたら、プリセットの右のプルダウンメニューを「JPEG標準」に変更。
  3. 一番下の「保存」をクリック。
  4. ファイル名を以下のようにして保存をクリック。
    「バナーデザイン制作課題A」→ 学籍番号-bannerA

では下のフォームに、書き出したJPGを添付して送信してください。
なおこの最後の課題の提出期限は今週末の2022年7月29日(金)23:59までです。
(とはいえ難しそうなら相談してね。)

    学籍番号(必須)
    氏名(必須)
    フリガナ (必須)
    メールアドレス(必須)
    課題ファイル
    バナーデザイン制作課題A (必須)
    質問・相談

    いままでの振り返り

    今回はウェブデザインBの最終回です。今までの内容を少し振り返ってみましょう。

    1. ウェブデザインB 第01回
      Photoshop・Illustratorの基礎知識やPhotoshopの基本設定について
    2. ウェブデザインB 第02回
      デザインとアートの違いやウェブデザインの流れについて
    3. ウェブデザインB 第03回
      サイト・ページタイプ別ウェブデザインについて
    4. ウェブデザインB 第04回
      デザインラフの3つのポイントと手書きデザインラフについて
    5. ウェブデザインB 第05回
      デザインラフのチェックポイントとワイヤーフレームについて
    6. ウェブデザインB 第06回
      レイアウトの手法やコツやルールについて
    7. ウェブデザインB 第07回
      配色の手法やコツやルールについて
    8. ウェブデザインB 第08回
      UIデザイン・UXデザイン・ユーザビリティについて
    9. ウェブデザインB 第09回
      第01回、第03回の提出課題の回答など
    10. ウェブデザインB 第10回
      Photoshopのレイヤーパネルについて
    11. ウェブデザインB 第11回
      Photoshopの文字パネル・文字ツールの使い方について
    12. ウェブデザインB 第12回
      ページデザインのテイスト別の特徴や制作作業のコツについて
    13. ウェブデザインB 第13回
      ウェブバナーについての話や制作の工程について
    14. ウェブデザインB 第14回
      バナーデザインの制作実践
    15. ウェブデザインB 第15回
      続・バナーデザインの制作実践

    こう振り返ってみると全15回にしてはなかなか内容が濃かったですね。

    今日のまとめ

    今回でウェブデザインBの講義は終了となります。
    みなさん、よくついてきてくれました。

    この講義では主に、ウェブデザインのデザインの部分をレクチャーしてきましたが、
    講義を通して一番伝えたかったことは、デザインすることはとても楽しい工程なんだということです。

    あらかじめ誰かに決められたルーティンワークのフォーマットを追いかけるばかりの作業では
    「考えること」を忘れてしまい、自分の財産である「引き出し」を増やすことがとても困難です。

    デザインは解決法、設計です。
    自分なりの解決法、経験に基づいた設計を行うことができるようになれば、
    きっとみなさんの武器になって、困難を楽しめるようになると思います。

    デザイン業は、目の前の課題に真剣に取り組んで、
    その困難を楽しめる人こそするべき職業だと思います。

    皆さんよく頑張りました!半年間お疲れさま!
    後期のウェブデザイン演習を受講する人は夏休み明けもよろしくお願いします。

    Photoshop実践:クイック選択ツール・境界線を調整・焼き込みツールで切り抜き

    切り抜き ファイト!とポーズを取る女性

    Photoshop 実践 その4:クイック選択ツール・境界線を調整、焼き込みツールで切り抜き

    切り抜き前

    -shared-img-thumb-N112_fightpoze_TP_V

    切り抜き後

    N112_fightpoze_edit

    この画像を切り抜くには「ブラシ」や「焼き込みツール」を使うようになります。
    「クイック選択ツール・境界線を調整」での切り抜きよりもさらに細かい切り抜きを行う場合に今回の方法が有効です。

    余裕があったらこれもやりたい

    時間があったら以下の技術をレクチャーしたい!
    実際の現場で何度も使っている極めて実用的な技術です。

    • 龍弥デザインがよく使う「写真から線画を抽出する」

    写真素材は「ぱくたそ」さんの素材を使わせていただきましょう!

    ぱくたそ-フリー素材

    WEBCRE8TOR.COM

    SEARCH

    PAGES

    CATEGORY

    ARCHIVE

    LINK

    CLOSE