レイアウトもばっちり、配色構成もＯＫ、いざガシガシとデザインを組んで行ってはみたものの、何か物足りない。。。 そんなまとまりすぎたデザインに、ピリッと印象的なアクセントを加える7つのテクニックをお届けしちゃいます！ どれもカンタン、ひと手間ちょいと加えるだけでデザインが引き締まるコト間違いなし!? そんなこんなで今回のエントリーは、いまいちインパクトの足りないウェブデザインにアクセントを与えるテクニックをご紹介してまうでー。 ウェブデザインにアクセントを加える画像加工のテクニック 1.1pxのドロップシャドウ これは文字と背景色の兼ね合いが少し悪い（視認性があまり良くない）場合に文字を少し目立たせたり、単純に文字にパキッとした印象を付加したりしたい場合に使えるテクニックです。 ポイントは「はっきりとした色差で、くっきりと1px」って感じで、Photoshopならドロップシャドウで「距離1、

WEBを制作する上で、印象を決定付ける大きな要素が背景。表示面積が大きいだけに背景が与えるものは大きい。今日紹介するのはそんなWEB制作の際に使えるシームレスに敷きつめられるWEB用背景素材配布サイトを集めたエントリー「27 Best WebSites to Download Free Seamless Patterns」を紹介したいと思います。 Pattern 8 ジェネレーター的な使い方ができるサイトから種類豊富に幅広い背景素材を配布されているサイトまで様々なサイトが収録されています。今日はその中からきになったものをピックアップして紹介したいと思います。 詳しくは以下 ■Everyday Icons 比較的POPな背景が多く登録されている背景素材サイトです。可愛らしいサイトを作りたい時に。 ■Hybrid Genesis 質感のある個性的な壁紙がセットで公開されています。クセがあるので

ドットインストール代表のライフハックブログ

猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない！ [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か

ドットインストール代表のライフハックブログ

夏をあきらめたい toyama です。もう暑いの飽きた！はやく秋！ 「ちゃんと文字が読めるか」とか気にしない、むしろ読みたいならお前が努力してガン見しろ、って感じのスタンスがうらやましい「小悪魔 ageha」風の加工をしてみました。Photoshop ならいろいろ手段がありそうですが、Fireworks でチャレンジしてみて途中で玉砕しました。無念。 小悪魔 ageha 風に言うなら「 Photoshop ならいろいろできる私たちがあえて Fireworks でやってみることに意味がある。」 こんな感じ。 この画像を作るのに使った小技 文字をパス上に沿わせてぐるぐるさせてみました。よく見るけど Web サイト作るときにはなかなか使わない（一昔前にはちょっと見かけた）技です。 パスとテキストを用意して、両方選択して[テキスト]→[パス上に結合]。 光のモチーフを作ってシンボル化しておいて、ぶ

カレーパレットを抽出したい画像をアップロードすると、自動的に分析してくれます。 基にしたのはこちらの写真です。 ここからカラーパレットを抽出してもらうと‥‥ なるほど、分かりやすいですね。海と砂浜と空、という感じでしょうか。 また、この分析を基に「KULER」や「COLOURlovers」などからも、お勧めのカラーパレットを引っ張ってきてくれます。 カラーコードを「Adobe Swatch File」としてもダウンロードが可能になっているみたいです。 似たようなウェブサービスとして、本や雑誌の表紙からカレーパレットを抽出することができる「Color of Book」というのもあります。 「iPhone」で撮影してメール送信すると、数分で返信するというサービスもあるそうです。 （via Lifehacker）

突然雨がアホみたいに強く降ってきたりして困ります。シーブレインの toyama です。 STOP！熱帯雨林化！ WEB サイトをデザインするときに避けて通れないのが矢印イメージの作成です。 テキストの頭に、ボタンの中にと、使いどころ満載。 普段 toyama がよく作る矢印の作り方をご紹介します。 1. しっぽ付き矢印 正方形を矩形ツールで書いて[修正]→[変形]→[数値を入力して変形]で回転を選択し、45°回転させます。 [数値を入力して変形]はサイズ変更、拡大縮小、回転のダイヤログボックスが一度に表示されてとっても便利です。 ダイレクト選択ツールで頂点のひとつを選択し、Delete で三角形に変形。 最初に書いた正方形が奇数×奇数の場合は三角形の頂点が 1 ピクセルになりますが、偶数×偶数の場合は 2 ピクセルの三角形になります。 パスが切れたままで気持ち悪い人は、ペンツールでパスを閉

例えば Web サイトのリニューアル案件では「ロゴのデータはありません。現サイトで使っている gif 画像を使ってください」というケースがよくあります。 「ロゴを白抜きにしたデザインパターンを作りたいんだけど…」という場合には、ロゴをトレース→パス化して使い勝手の良い素材を用意するのがベストな方法ではありますが、トレースする時間が取れない時は以下の方法がお手軽でオススメです。 使用した画像加工ソフトは Fireworks です。 ↑支給された（というか Web サイトからコピーした）ロゴの例。透明化もされていないし、切り抜くのも面倒。 STEP 1 ロゴ画像をグレースケールで保存します。 STEP 2 グレースケール化したロゴ画像を背景の上に配置。 STEP 3 ロゴ画像を選択して「フィルタ」→「カラー調整」→「カラーの塗り」を設定。 カラーは何色でも良いですが、ブレンドモードは「反転」に

画像内に映り込んだ所望のオブジェクトを排除し、違和感の無い画像を生成するシーン補完技術に関しては近年複数の研究成果が発表されている。しかし中でも2007年のSIGGRAPHにて米カーネギメロン大のJames HaysとAlexei A. Efrosが発表した手法*1はブレークスルーとなりうる画期的なものだ。 論より証拠、早速適用例を見てみよう。本エントリで利用する画像はPresentationからの引用である。元画像の中から邪魔なオブジェクト等の隠蔽すべき領域を指定すると、その領域が補完された画像が自動的に生成される。 アルゴリズム 効果は抜群だがアイデア自体は単純なものだ。Web上には莫大な数量の画像がアップされており、今や対象となる画像の類似画像を一瞬にして大量に検索することができる。そこで、検索された類似画像で隠蔽領域を完全に置き換えてしまうことで違和感の無い補完画像を生成するのだ。

こんにちは、シーブレインの toyama です。梅雨入りです。 サムネイル用の画像など、一定の大きさにそろえた画像を大量に書き出さないといけないときが、長い人生に一度や二度はあると思います。 私にも以前そんな瞬間があったのですが、その頃にこの技知ってればー！という技を今更知ったのでここに記しておくことにします。 1.書き出したいサムネイルのサイズにキャンバスサイズを設定します。 2.サムネイル化したい画像をざくざく読み込んで、適当に（いい意味で）画像を配置します。 3.「コマンド」→「ドキュメント」→「レイヤーに配分」。すると、適当に読み込んだ画像が一枚づつレイヤーに格納されます。 4.画像を書き出すための「最適化」を設定したあと、「書き出し」ます。 5.書き出しのダイヤログが出てきます。「書き出し」のプルダウンメニューから「レイヤーをファイルに変換」を選択します。3.で画像をレイヤーに分