リストマークのバリエーション

デザインメモ

リストマークのバリエーションを簡単に増やしてみた。

1.まず普通の正方形

2.影をつけてみる

3.白枠をつけて影をつける

1や2はともかく、3はちょっと凝った感じに見えないだろうか？

他にもドット系のリストマークを3にアレンジしてみると


　　　　　↓

2も3も Photoshop のレイヤースタイルで簡単にできるので、よろしければお試しあれ。

元気な自然系配色

配色

かなり前だが児童向けの宿泊研修施設のサイトを作成させていただいた。その時に案で使った配色がこれ。

結局は茶ではなく青と緑を多くを使ったさわやか配色になったのだが、これはこれで気に入っている。

農業系やペンションなどの依頼があればまた使ってみたいと思ってるが、そう思ってるとなかなか来ないものかも。

Photoshopで水彩画風

デザインメモ

こっそり日参している DesignWalker さんで紹介してあったチュートリアルページをまねしてみた。

書いてある通りなのだが、使えそうなので自分用にもメモしてみる。

  1. レイヤーを3枚コピーする
  2. 上2枚のレイヤーを非表示にする
  3. コピーの1枚目（元画像のすぐ上）のレイヤーを選択し、フィルタ＞アーティスティック＞ットアウトで、レベル数：4、エッジの単純さ：4、エッジの正確さ：2にする
  4. レイヤーの描画モードを「輝度」に設定
  5. コピーの2枚目（上から2枚目）のレイヤーを選択し、フィルタ＞アーティスティック＞ドライブラシで、ブラシの大きさ：10、ブラシの細かさ：10、テクスチャ：3にする
  6. レイヤーの描画モードを「スクリーン」に設定
  7. コピーの3枚目（1番上）のレイヤーを選択し、フィルタ＞ノイズ＞明るさの中間値で半径12pxにする
  8. レイヤーの描画モードを「ソフトライト」に設定する

手持ちの画像で遊んでみた↓


3枚目なんてただの芝生だ。期待せずにやってみたら何かと使えそうなものになったので載せてみた。

デザイン変更

Diary

とりあえずの暫定版として、スタイルシートをいじってみた。

IE7に合わせて作り、Firefox3で確認したらヘッダーの下が大きく空いてしまっている。これは padding 指定が原因とわかっているのだが、ヘッダー部分がh1しか指定がないので仕方がないかもしれない。<div id="header"> 等で囲ってほしいと思っているのは私だけだろうか・・・？

Win版の Safari や Opera 、IE6 でも確認したが、特に問題はないようだ。未確認の Mac での表示が気になるところ。

ところで別サーバからスタイルシートを読ませることはできるのだろうか？

渋色・淡色カラーサンプル

配色

最近お気に入りの配色。

もともと渋ピンクは好きな色ではあったものの、他の色との組み合わせで悩むことが多く、実際の使用頻度は低かった。

が、ふとしたきっかけで渋淡グリーンとの相性が意外と好みであることを発見し、他の色もトーンを落として合わせるようになった。

使い方によっては幻想的にも和風にもなると思う。