『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
![飲食系Webサイト制作で気をつけたい10個のポイントまとめ - PhotoshopVIP](https://cdn-ak-scissors.b.st-hatena.com/image/square/ffcdc63df3606b28f1b7655cc30fed91619172fb/height=288;version=1;width=512/https%3A%2F%2Ff1zxujx2.user.webaccel.jp%2Fwp-content%2Fuploads%2F2015%2F01%2Fdelective-website-top.jpg)
何も考えずにPhotoshopやIllustratorを立ち上げ、デザイン作業に入ってしまうのは悪いクセ。 ユーザーをワクワクさせるデザインとはなにか? この情報を分かりやすく伝えるデザインとはなにか? クライアントの要望に応えるデザインとはなにか? 考えてデザインする力が身につくオススメの本を紹介します。 グリッドや角丸を使う時もなんとなくではなく、その目的や効果的な使い方などしっかり身につけておきたいですね。 本書はコミュニケーションを軸に「人のことを考えたWebデザイン」ついて学び、Webデザインの思考のプロセスを身につけることができます。現役のデザイナーやディレクターの方には是非、手にとってほしい本です。 他のデザイン本とはかなり一線を画す内容となっています。 内容は大きく分けて、2つ。 1-3章はクライアントやチーム内でのコミュニケーション、4章からはユーザーとのコミュニケーショ
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン関係 これからはGIFアニメからAPNGの時代に! iOS 8でサポートされたAPNG画像を使いこなそう – ICS LAB 「APNG」とは「アニメーション可能な PNG 画像形式」のことで、PNG と同様に 8bit(256色)や 32bit(アルファチャンネルあり)などがサポートされます。 Can I use… Support tables for HTML5, CSS3, etc を見ると、2014年9月末時点では Firefox、iOS 8 くらいしか対応しておらず「これは当面使えないな…」と思っていたのですが、この記事によると「JavaScriptライブラリのapng-canvas
落ち着いたパステル系のカラー、同一色相の繊細で美しいグラデーションなど、Material Design, iOS 8, Modern UIなどやフラットなスタイルで使われている最近人気のあるカラーを紹介します。 PhotoshopやIllustrator用のスウォッチもダウンロードできますよ。
シームレスに利用できる クリエイティブかつデザイン的なベクターパターンまとめ「Pattern Design – 35 Seamless Free Vector Patterns」 背景素材などでよく利用されるシームレスパターン素材。継ぎ目なく敷き詰められる点が非常に便利な素材です。今回はそんなシームレスベクターパターンをまとめた「Pattern Design – 35 Seamless Free Vector Patterns」を紹介したいと思います。 Abstract Hexagon Pattern Background on Behance デザイン的に非常に凝ったつくりが特徴のベクターパターン素材が多数紹介されています。 詳しくは以下 Patterns for Adobe Creative Cloud on Behance 色鉛筆で描き出したような、ラフなテイストが特徴のパターン。素
単調なタイトルで伝わりにくそう ですけど、割りと便利なエクステ ンションだったのでご紹介します。 起動中は常にWebサイトを白黒に してくれる、というもの。Webデ ザイナーさん向けですね。 Webサイトをグレースケール化してくれます。毎回操作するわけじゃなく、エクステンションを起動させればページ移動しても他タブで開いていたページもリロードせずにグレースケール化するので結構便利でした。 グレースケール化するエクステンション。Webデザイナーさん向けですね。Flashなども全部白黒にしてくれます。 Webデザインにおいて色のみに依存した情報の提供は非常に問題です。そうした問題を、グレースケール化する事で検証する事が出来ます。色を排除すればWebデザインの機能性をチェックしやすくなりますね。 例えば当ブログではタイトルのリンクが黒→赤となりますが、グレースケール化するとオンマウス時で色に変化が
前回のデザイナー視点で見る!イケてるバナーとトホホなバナー~これはトホホ編~ に引き続き今回は参考にしたいグッドデザイン編! 前回はあまり目に優しくありませんでしたが、今回はアイデアの種になりそうなバナーたちです。 縦に割る 写真を文字を分けることでスッキリとした印象になります。
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。 Isotopeの特徴 レイアウト モード: CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。 フィルタリング: jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。 ソート: あらゆるデータからソートが行えます。 各機能の互換性: レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。 最適化: Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ(IEなど)は、JavaScriptでアニメーションを実現します。 Isotopeの実装
quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね!みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙(ポスター、雑誌)のような完成図をイメージされることが多いのではないのでしょうか。(特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ!) それで今回はLPやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するため
こんにちは。LIGブログ編集部です。いつも「時間が足りない!」「忙しい」「寝たい……」と思っているWebデザイナーの皆さん、Photoshop作業の時間短縮をしていますか? Photoshop作業の効率化すれば、余った時間でやりたいことができますよね。そこで今回は、Webデザイナーさんならぜひ使ってほしい、Photoshop作業を効率化する方法をまとめました。Photoshop初心者の方も、そうでない方も、時短できる要素がないかぜひ確認してみてください。 1. ショートカットを使い倒そう 作業時間の短縮を考えたときに、まず思い浮かぶのがキーボードショートカットですよね。知ってるか知らないかで大きな差が出てしまうところでもあります。 ひとつひとつ説明すると長くなってしまうので、おすすめのショートカットについては、かなり詳しく解説されているこちらの記事「Photoshopの効率化におすすめのシ
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く