0

レイアウトのバランスとは

Webサイトのfirst-view内で構成の要となる、header。

その「バランスが良い」とは、どういう状態なのでしょうか?

ここにサンプルがあります。

omosa_05

 

人は、色が塗られている面を「重い」と感じ、塗られていなかったり色が薄い部分を「軽い」

と感じます。分かりやすくするため、サンプルをモノクロに変換してみます。

omosa_02

 

例の修正前は右側にヘッダが偏り、不安定です。

修正後はgloval naviを画面の端から端まで引き伸ばし、安定しました。

ただし、もし、使用するロゴが高品質で、インパクトのあるものあったり、ロゴの色面が重かった場合は

修正前のレイアウトでもOKになる場合があります。画面が持ちます。

今回の場合はロゴが薄い色でしたので、このように修正をしました。

レイアウトが完成したら、モノクロに変換してみてバランスをチェックしています。

DTPなどでも参考になるかと思います。

0

しろうと写真をきれいな商品写真にしよう

自分で撮ったこの写真を

cup

 

これにしましょう。

cup-d

 

 

?かげ

 

実物と商品画像の色とを出来るだけ合わせる努力はデザイナーには必要です。しかし、訪問されたお客様の

モニターにより環境は異なるため、完全に合わせるのは不可能です。ですので、ネットショップを開くときには

「※画面上の色はブラウザや設定により、実物とは異なる場合があります。ご了承の上ご注文下さい。」と注意書きを一文添えましょう。

0

ショートカットキーについて

Illustrator(イラストレイター)やPhotoshop(フォトショップ)などで

デザイン制作を進めるにあたり、作業を簡単に行える【ショートカットキー】を

使うことが時間短縮につながります。

ということで、よく使うことがあるショートカットキーを

ご案内します。

●保存→Ctlr+S

●行った作業の取り消し→Ctlr+Z

●ひとつ前に行った作業の取り消し→Ctlr+Shift+Z

●コピー→Ctlr+C

●ペースト→Ctlr+V

●拡大→Ctlr+スペース

●縮小→Ctlr+Alt+スペース

●キャンパス内全選択→Ctlr+A

●選択範囲の解除→Ctlr+D

●ガイドの表示・非表示→Ctlr+:(コロン)

●グリッドの表示・非表示→Ctlr+@

他にも、【選択】でしたり、【カスタムシェイプツール】の

ショートカットキーがありますが、これらについてはそれぞれのツールに

マウスポインターを重ねることで知ることが可能です。

それについては、またの機会にご案内します!

それでは~^^

0

デザイナーの仕事で用意する物(初心者向け)

こんにちは!

デザイナーの仕事に少し興味がある方へ、実際使っている物を紹介します。

Windows 7

ボールペン
シャープペンシル
えんぴつ(いきなりマウスで絵は描けません)
消しゴム
タブレット
デジカメ(スキャナー代わりにもなります。)

ブルーライトカットメガネ

仕事中のラフやメモ様に、裏紙たくさん。

持っている データなど

ロイヤルティフリーの素材写真CD-ROM(手持ちに無い素材はstock.xchngなどのサイトで探す。)

フォントCD-ROM
自分でせっせと集めたロイヤルティフリーのアイコンたち

 

パソコンにインストールしている物

WinSCP
Photoshop
Illustrator
Dreamweaver
firefox
IE
Chrome
DropBox(お家のパソコンとデータ共有できる。)
など

物ではありませんが、ブラウザにインストールしているもの

MeasureIt! 1.1.3  (バナーやアイキャッチのサイズが測れる。)

Screen Capture 5.0.6(Webページがスクロールの下部まで丸ごとキャプチャできる。)

はてなブックマーク GoogleChrome 拡張 1.3.4(ブラウザがバビロンにやられてブックマークが消えても
オンライン上にあれば安心。http://css3button.net/などのジェネレータをマーク。)

?

 

0

現場でのカンバスサイズの設定

デザイナーのfです。

さて、フォトショップでWebデザインを始めよう。という時、白いカンバスサイズをいくつにしたら良いでしょうか?会社によって事情も異なり、正解はありませんが、当社では、最近は2500pxにし、その中にさらに幅960pxのガイドを引き、960をコンテンツと想定してデザインしています。

 

実は、デザイナーになる前に、 Webスクールで「モバイルファーストでデザインせよ」と学んできた経緯があります。ホームページはかつてパソコンで閲覧されるもので、それを想定して作られてきましたが、今はスマホやタブレットが使われる人口が上回りました。 PCの画面サイズで作ったサイトを今まで通り納品し、それを流用してスマホ版を別途作る…という流れが予算的にやりやすいので多くはこの方法がとられてきました。

 

「モバイルファースト」は逆の発想で、スマホサイトを最小限の要素で作る→タブレットやPCでは画面サイズに余裕がでるので、広告などスマホに入りきらなかった要素を足していく。という流れです。これは一つのhtmlでcssはリキッドレイアウトにするので、進行と公開はスマホ・PC同時になるパターンです。

 

しかし、お客様は新サービスの発表やイベントに合わせてホームページを早く見たい。専門的な知識がなくても自分で更新できるようにしたい。と、ニーズが様々です。cmsを組み込むことも多くなっています。 Cmsは更新システム以外にも、PC版を手軽にスマホに変換してくれるライブラリも登場しました。そこで、現場では結局、cmsを利用したスマホ最適化の手法が採用されています。これなら、早々にPCサイトを公開しておいて、あとでスマホ版に着手できます。PCサイトでデザインの方向性がはっきりするので、スマホ用デザインが作りやすくなります。

 

そういう事情で、現状ではPCサイトのタスクとスマホサイトを完全に分けており、「今回はスマホサイト」という指示が出たら横幅を640pxで作っています。

haba

0

WEBデザイナーになるために絶対学ぶデザインソフトは?

フューチャーのぼこちゃんです。

WEBデザイナーになりたい!!って思う人は世の中たくさんいます。

パソコンスクールもたくさんあります。

でも何故か、就職率が悪いのは何故なのか?

それは憶測ではありますが、現場レベルに到達していないか、実際現場でやらないことを勉強しているからではないでしょうか?

世の中ではファイヤーワークスが浸透してきていますが、実際現場でWEBデザインをするのは、まだまだフォトショップメインとなっています。

それでもファイヤーワークスをどのスクールでも学ばせているから、現場にいくと困るのではないかと、ちょっと思ってしまいました。

確かにファイヤーワークスのスライスなどやりやすいですが、まだまだフォトショップでないできないことも多数あります。

そう、つまりWEBデザイナーになりたいなら、まずはフォトショップで徹底的にWEBを作るべきです。

このサイトでは、完全現場主義で実際制作しているテクニックなどもご紹介できればとおもっています。

あなたが検索エンジンを使用して「ここでやり方がわかった」と思われるような内容をどんどん書いていきたいと思いますのでどうか遊びに来て下さい。