【TechAcademy】WEBデザインコース 45日目 「イラレがっつり挑戦してみました。」

この記事は約3分で読めます。

どもです、TechAcademy WEBデザインコース45日目が終了しました。
一日作業をしてた正確な作業時間はわかりませんが、トータル9時間以上は確実。

どっぷりwebデザインに浸っていても辛くはならないあたり結構向いていると自分では思っています。

今日やったこと

  • Lesson13【オリジナルサイト2周目:サイトマップ作成】
  • バナー模写:14枚目
  • chot.design【イラレ】
  • サイト分析
  • 読書&ストレッチ

サイト分析途中までしてたのですが、途中からサイトマップとワイヤーフレームの課題に取り組んでいたので、存在を忘れてました。明日、やりかけの分を倒します。

Lesson13【2周目:サイトマップ&ワイヤー】

サイトマップの作成は完了しました。今回作成するページ数は3枚になります。
ワイヤー作成はTOPページのみ完了、明日のメンタリングまでには終わらせられると思います。

今回の課題では余白を広くとったモダンなサイトを作成してみるので現在組んでいるワイヤーフレームのスカスカ感がなんとも不安になります。
完成したらこのサイトに乗っけてみます!

バナー模写:13枚目

今日も今日とてバナー模写しました。縦長(300×600)のバナーを模写です。

13枚目:0.5h

4台分車の画像を使用してますが、長方形を変形させたものにクリッピングマスクして画像をはめこんでいます。
斜めに画像を切りとるよりも効率的に作業を行うことが出来ました。

縦長「300×600」のバナーでは画像エリアを大きく確保してビジュアルでユーザーにアピールしているものが多いという点に気付くことができました。

chot.design「イラレ」

今日でchot.designイラレ編のほとんど終わらせてしまいました。
以下、文字・段落パネルの覚え書きになります。

【文字パネル】
行送り→行の高さを変えること,数値が大きほど行間が高くなる
カーニング→一つ一つの文字と文字の間を調整すること
トラッキング→カーニングと違い選択した文字列全体の文字と文字の間隔を調整する事
文字詰め→文字の前後のアキが均等に詰まる。数値が大きほど詰まる
ベースラインシフト→設定すると、文字を上下に移動できる
オールキャップス→文字をテキストが全て大文字に変換
スモールキャップス→全て大文字を小さい状態に変換

【段落パネル】
インデント→字下げ
禁則処理→文章の行頭に記号などを配置をしないことで読みやすくすること処理のこと
前回のオリジナルサイトでは強い禁則を機能を使わず行っていた→便利機能かも
文字組→日本語の約物に関する詳細な設定が可能(なし、約物半角、行末約物半角、行末約物全角、約物全角)
ハイフネーション→単語が行末に来たときに単語が分割され、自動的に「ハイフン(-)」が入り次の行に送る。

イラレでマップ作成!

カリキュラムの一貫でマップの作成もできました。

クオリティはそんなに高くありません。
イラレでの作成してみるとかなり大変でした。イラレ頑張らねば。

明日のやることリスト

  • Lesson13【オリジナルサイト2周目:ワイヤーフレーム合格】
  • 第13回メンタリング
  • バナー模写:15枚目
  • chot.design【イラレ】
  • サイト分析
  • 読書&ストレッチ

明日はメンタリングまではワイヤーフレームの作成に注力したいと思います。
間に合うとは思いますが、気を抜かないようやっていきます。

まとめ

バナー模写、カンプのクオリティを上げるためにもイラレの取得をしたいところ。そうすればデザイン力がグッと上がるんだろうなと。

基礎的な部分をchot.designでしっかりおさらいしつつ、トレースなりで手を動かして見ようと考えています。同時進行でイラレの良い教材があればそちらも。

ではでは。

コメント