めもぶ

*

4/1, 2012

デザイン勉強会メモ vol.1

デザイン勉強会のメモです

■概要：デザインの基礎をおさらいしながら、

　　　いいデザインのサイトを見て勉強していく。

【マージン(余白)について】

・余白を意識する

・一番外側の余白が一番大きくならないといけない

・外枠が余白が狭いとデザインが大味に見える。

　ので、外を大きくとって内側の余白を詰めると締まってみえる。

【メリハリ】

・一番目立たせたい情報の整理が必要

・文章を読んで内容を理解しないといけない。

・一箇所一番目出させる場所を決めたら

・情報の整理＝情報のブロック分ける

・似た感じの要素を近づけると一塊の要素にみえてしまうので、

　全然違うあしらいにする。

・整列も大事。情報を整理すること。

・悪いデザインをみて、どこが悪いか言えるようになるのも勉強になる。

【デザインの差別化】

・ちょっと手間のかかる表現をやる。

　└質感(アナログ感)

　└手書きで破線を表現してり

　└バランスをとるのが難しくなるので注意する

・影のかけ方もただドロップシャドウをかけるのではなく、

　影に形をもたせて表現すると、味がでる。

*

1/15, 2012

一瞬で作れる放射状の線

下図のような日の丸を作る方法は色々あるのですが、今回は一風変わった作り方を解説します。

この図を作るためには、Illustratorで正円と放射状の線を描く必要があります。

正円は簡単ですが放射状の線は少しテクニックがいります。それでは解説をはじめます。

１.正円を描きます。

楕円ツールを選択して、shiftを押したままマウスをドラッグすると正円のまま大きくしたり小さくしたりできます。

２．塗りを消す

塗りつぶしてあると、線が見えなくなってしまうので塗りを消します。

代わりに線を表示させましょう。

３．放射状に描く

「線」の設定を上図のように設定すると、放射状に線があっという間に描画できます。

しかし完成した図をよく見てください。真ん中にある右側の線が他の線よりも太いことに気づいたでしょうか？均等な太さ、間隔の放射状の線にするためには微調整をする必要があります。

４．線の調節法

線幅を変えれば線の長さが、線分をかえれば線の細さが調節できます。間隔は文字通り線同士の間隔が調整できます。これで線画均等になるように手直ししてあげましょう。

円以外の形を使ってもおもしろい表現できるので、色々試してみてはいかがでしょうか？

それではまたの機会に (´ー｀)

Writer:BEMU

*

1/9, 2012

楽なドット絵の作り方

今回はドット絵の楽な作成方法について解説します。

「そもそもドット絵ってなんぞや？」という方はファミコンのグラフィックを思い出してください。あの小さい四角(ドット)の集まりで描画された絵(下図)のことをドット絵と呼びます。

昔はコンピューターの解像度が低かったので現在のように写実的なCGで表現はできず、単純なドットでしかグラフィックを表現できませんでした。

現在ではシンプルさやレトロ感を出すために、ドット絵がイラストやデザインの手法として用いられています。

一般的にドット絵は手作業で作られるものですが、Photoshopのフィルター操作だけでも上図のように擬似的なドット絵を作ることができます。

前置きが長くなってしまったので、解説をはじめます。

1.写真をモノクロ(白黒)にします。

イメージ＞色調補正＞彩度を下げる
ショートカットキー（⌘＋Shift+U）

２.モザイク処理

フィルタ＞ピクセレート＞モザイク
セルの大きさ:5平方ピクセル (１辺が5ピクセルのドット絵が作成されます)

3.二階調化で調整(アンチエイリアスなしの場合)

調整レイヤー＞２階調化

3.トーンカーブで調整(アンチエイリアスありの場合)

調整レイヤー＞トーンカーブ

手打ちのドット絵ではないので違和感がありますが、少しいじってあげるとドット絵らしくなっていきます。なので、ドット絵のベースとしてもこの手法は使えます。

今回はわかりやすくするためモノクロ(白黒)にする処理をしましたが、この処理を無視してもドット絵を作成することができます。

解説は以上になります。慣れたら値を変えて色々と試してみてはいかがでしょうか？

それではまたの機会に (´ー｀)

Writer:BEMU

*

1/7, 2012

ハーフトーンパターンの作り方

Photoshopでハーフトーンパターンを作成する方法は「ピクセレートのカラーハーフトーン」と「スケッチのハーフトーンパターン」の２種類です。

「そもそもハーフトーンとはなんぞや？」という人は下図を参考にしてください。ハーフトーンは、このように点々の粗密さで濃淡を表現する描画法のことです。

もともとは印刷のための技法だったのですが、近年ではデザインやイラストの表現として取り入られるようになり、Photoshopのフィルターで簡単に作成することができます。

以下はハーフトーンの設定方法になります。

■フィルタ＞ピクセレート＞カラーハーフトーンの設定方法

■フィルタ＞スケッチ＞ハーフトーンパターンの設定方法

解説は以上になります。慣れたら値を変えて色々と試してみてはいかがでしょうか？

それではまたの機会に (´ー｀)

*

1/5, 2012

Wordpressでlightboxのプラグインが反映されなかったときの注意点

Wordpressでlightboxのプラグインが反映されなかったときは以下の点に

注意する。

</head>の前に

<?php wp_head(); ?>

がないとプラグインが必要ファイルを設置できません。

あわせて footer.phpの</body>の前に<?php wp_footer(); ?>があるかも確認してください。

ightbox-2-wordpress-pluginがどちらを使っているかは分かりませんが、両方記述しておいた方が良いと思います。

【WordPress › フォーラム » lightbox-2-wordpress-pluginが使えない】http://ja.forums.wordpress.org/topic/681 より

*

1/3, 2012

綺麗なグラデーション表現をするために

*

11/8, 2011

Dreamweaverが落ちまくるときの対処法

Dreamweaver(CS4)を起動してリモートホストに接続しようとしたり、

PUTしようとするとフリーズして強制終了するという症状に

悩まされていたのですが、以下の方法で改善されました。

同じ症状でｵﾜﾀ＼(^o^)／状態になって人は、試してみるといいかもしれません。

“At your own risk”なのでバックアップ取るなど準備して下さいね！

「直前に編集していたサイトのサイトキャッシュファイル(.dws)を削除する」

サイトキャッシュファイルの場所は下記になります。

■Macintosh

Macintosh HD/Users/<ユーザー名>/Library/Application Support/Adobe/
Dreamweaver<バージョン>/ja_JP/Configuration/SiteCache/<サイト名>.dws

■Windows(vista/7)

C:\Users\＜ユーザ名＞\AppData\Roaming\Adobe\Dreamweaver ＜バージョン＞\ja_JP\Configuration\SiteCache

詳しくは以下のサイトで確認してください。

サイト定義に関連する作業の実行中に Dreamweaver がクラッシュする

以上です。

いやぁ、対処方法がわかるまでは焦りました(´・ω・`;)

—僕の環境はこちら———-
■iMac
■Mac OS X 10.5.8 (9L31a)
■DreamweaverCS4
———————————-

*

10/30, 2011

インフォグラフィック

Squarepusher - My Red Hot Car
Roky Sopp - Rmeind me

インフォグラフィック（英: Infographics）は、情報、データ、知識を視覚的に表現したものである。路線図など。また上記の動画のように、動きのあるインフォグラフィックもある。

日本だとTUBE GRAPHICS( http://www.tubegraphics.co.jp/ )が有名

*

10/24, 2011

Spotlightのショートカットキー
ショートカットキーはデフォルトだと「Control」＋「スペース」だけど、
「システム環境設定」から「Command」+「スペース」にショートカットキーを変更できる。

ChromeにはFirebugの代わりになる。デベロッパーツールがある。
「表示」→「開発/管理」→「デベロッパーツール」か、
「alt」+「Command」+「I」で表示できる。

*

10/23, 2011