Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Monthly Archives: 4月 2012

[Photoshop] The fast and easy way to clean dust – フォトショップを使った簡単にできるダストクリーニング

  • Pocket
  • このエントリーをはてなブックマークに追加

フォトショップを使ったサクっとできるダストクリーニング方が紹介されてます。よく商品写真を撮った後で「んがーホコリ付いてる!」って事ありますよね。特にフラッシュを使った静物撮影の際に、ちょっとした糸くずとか付いたりしますね。ここで紹介されてる手法は、まず綺麗に見えるレイヤーを別に作り、最後にマスクを使ってダスト部分のみ手作業でクリーニングしていくというものです。手順は以下より。

(さらに…)

[Photoshop] Photoshop Actions to fix the banding of Photoshop’s gradients – フォトショのグラデのムラを抑えるアクション

  • Pocket
  • このエントリーをはてなブックマークに追加

フォトショで色の近い2食でグラデかけると、よく色ムラというか、なんかこう色の変化する段階が見えちゃう事ありますよね。あれを綺麗に見せるためのアクションファイル。グラデの色ムラを抑える方法って以前からあるにはあるんだけど、グラデを描画したレイヤーを直接作業したりするので、レイヤースタイルで描画したグラデには適用できなかったりしました。こいつは新規にノイズレイヤーを追加する手法なので、見た目上はレイヤースタイルでのグラデにも適用できる点がナイス。使い方はアクションをDLしてフォトショに追加するだけ。アクションが走ると新規のノイズレイヤーができてグラデが綺麗になります。試しにノイズレイヤーを不可視にするとその効果が分かります。マスクなどは手動でやるっぽいですね。グラデが汚くてどうにもこうにもイラっとする時に是非これひとつ。

[Icon] Flat Icons & Icon Fonts – フラットなデザインのアイコンや、アイコンフォントのまとめ記事

  • Pocket
  • このエントリーをはてなブックマークに追加

フラットなデザインのアイコン素材と、Webで使えるアイコンフォントをまとめた記事。まず最初に@font-faceで使えるWebフォントが紹介されてて、後半では画像としてのアイコン素材がズラっと並びます。それぞれアイコンの種類の多さとコストが一緒に紹介されているので、いちいちリンク先で調べなくてもだいたいのデザインと概要が分かるようになってる点がナイス。この手の装飾の少ないアイコンはデザインの素体としても使いやすいですね。

[Print Design] An Archive of Book Cover Designs and Designers – ブックカバーデザイン作例のアーカイブ

  • Pocket
  • このエントリーをはてなブックマークに追加

様々な本のカバーアートワークをアーカイブしたサイト。海外のサイトなので紹介されてる内容は洋書になります。各作例の詳細ページに入ると、本の作者、パブリッシャー、発売日、ジャンル、カバーデザイナーなどの情報が見れます。サイトの目的が「デザインとデザイナーのアーカイブ」なので、デザイナー名をクリックすれば、その人の他の作例をまとめて見る事もできます。印刷物デザインのネタ帳にいいですね。

[Web Design] 18 Beautiful Examples of Parallax Scrolling in Web Design – スクロール芸サイトのまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

HTML5, CSS3のサイトでよく見かける、いわゆるスクロール芸のサイトをまとめた記事。一般的にはパララックススクロールと言うようですが、まぁスクロール芸ですよね。縦方向だったり横方向だったり、興味深いマスクの使い方してたりして、サイトによって色々と凝った作りのものが多いです。こういうのって作った事ないんだけど、なんかスゲぇメンドくさそう。経験としてはやっておきたいんだけど、一時期だけの流行りモンって感じも実際ちょっとしますよね。

[Prototyping] 10 Completely Free Wireframing and Mockup Tools – ワイヤーフレーム制作に役立つツールまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

ワイヤーフレーム制作(プロトタイピング)に役立つツール類がまとめられた記事。ブラウザ内で使うオンライツールや、Firefoxプラグイン、DLして使うローカルアプリなど色々あります。Webディレクションなんかをしてる人なんかにオススメ。自分はこの手のはだいたいイラレで書くけど、プロジェクト内にイラレ使えない人がいたりするとアレだしナニなので、オンラインツールを使うようにした方がイイのかなぁとかたまに思います。間違ってもパワポで描こうなんて思いませんが。

[Favicon] HTML5 Boilerplate Favicon PSD-Template – HTML5サイト向けのファビコンテンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

HTML5でコーディングされたサイト向けのFaviconテンプレート。Faviconというと16*16の印象があるんですが、HTML5になるとサイズが色々と増えるんでしょうか? このへん勉強不足なのであんまし分かんないですが、今回このPSDファイルがアップデートされた理由が、iPad 3rdのRetinaディスプレイへの対応だそうです。144*144サイズのテンプレートが追加されたという事で、おそらくHome画面登録の際のアイコン対応なんでしょう。プラグインと併用する事で書き出しが容易になるようです。常用してもらうサイト作りの際にはFaviconって地味に重要ですからね。そういやこのサイトのFaviconも数年前に作ったきり放置だなぁ・・・とか思いました。