『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

こんにちは、デザイナー兼イラストレーターのもりたです。 先日、後輩のデザイナーに「フォントの選び方をもっと考えよう」と指摘したのですが、でも考えるって何を基準に考えればいいの？と自省したとき、うまく言葉にできませんでした。 そんな折、筒井美希著『なるほどデザイン』を読んでいたらデザインを擬人化すると書かれていて、とても納得しました。 簡単に言うとデザインのもつ雰囲気が、どんな人物に当てはまるか言語化するという内容でした。例えば文字ならば、「丸い文字は“幼さ”を感じるな」とか「カッチリした明朝体は“年配の人の貫禄”を感じさせるな」といった感じです。 よく考えてみれば、私たちは普段ターゲットを意識しながらデザインをしているので、人からデザインへ、擬人化の逆の工程を頭のなかでおこなっているはずですが、あえていつもと順序を反対にすることで発見できるものもあるのですね。 そんなわけで今回は自分の練習

MiniGrid -GitHub デモページ、アニメーションのデモ レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。アニメーション無しでも利用できます。 cta.js -GitHub デモページ パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで変形します。

こんにちは。最近、AdobeCCをおねだりしているデザイナーO（王）です。 表題の触れ込みなんですが、「どうせアクションを使うんでしょ？」と、半ば自分の推理を確かめるためにこの記事を読んでいるあなた！　残念ながら、ハズレでした！　この記事では、「アクション」を使わないで一瞬でレトロ風に加工する方法を紹介します！ Before・Afterはこんな感じです。 Step 2 以下のショートカットキーを押します。 Mac: option+shift+X Win: alt+shift+X ※描画モードを「除外」に設定するショートカットです。 Step 3 以下のショートカットキーを押します。 4 これはレイヤーの不透明度を「40」%に設定するショートカットです。ブラシ系のツールがアクティブの状態だと、そちらの不透明度が優先的に設定されますので、注意してください。 なお、40%はあくまでも参考の一つで

スマホで表示すると三本線のアイコンになるハンバーガーメニューは、確かに小さい画面の問題を解決する方法の一つですが、ベストな選択ではありません。 ハンバーガーメニューの良い点を利用し、悪い点を改善した、スクリプト無しでレスポンシブ対応のナビゲーションを実装するスタイルシートを紹介します。 Paradeiser Paradeiser -GitHub Paradeiserの特徴 Paradeiserのデモ Paradeiserの使い方 Paradeiserの特徴 実装は簡単で、超軽量 Paradeiserは1.3KBのスタイルシート1つだけで、簡単に実装できます。 CSS Only jQueryやスクリプトは使用しません。 レスポンシブ対応 スマホ、タブレット、デスクトップのそれぞれで快適に操作できます。 オーバーフロー ナビゲーションはコンテンツにオーバーフローで表示されます。 スクロール時の

Web制作の実際の現場で、ブレーンストーミング、ワイヤーフレーム、UIデザイン、プロトタイプ、プロジェクト管理、ファイル管理・バージョン管理に使われている人気のツールを紹介します。 Design Tools Survey 「Design Tools Survey」は、世界各国の制作会社・フリーランス・スタートアップ企業など、さまざまな形態でWeb制作を行っている人にアンケートをとり、それぞれ使用しているツールをまとめたものです。 日本人100%とは当然異なると思いますが、興味深いデータとなっています。 ブレーンストーミング ワイヤーフレーム UIデザイン プロトタイプ プロジェクト管理 ファイル管理・バージョン管理 ブレーンストーミング ブレーンストーミング時に使うツール 64%: 鉛筆と紙 10%: Sketch 7%: Illustrator 7%: Photoshop 6%: その他