Photoshopで作成したデザインを、より魅力的に仕上げるモックアップ素材。 プレゼンテーションの資料作成に役立つアイテムから、あまり見かけないユニークなアイテムまでPhotoshopで編集できるモックアップ素材をあつめました。もちろん、どれも無料ダウンロードすることができますよ。 モックアップ素材の簡単な使い方は、こちらの記事をご参考にどうぞ。また利用に関するライセンスはそれぞれ異なりますので、確認のうえご利用ください。 詳細は以下から。 デザインを魅力的に仕上げる、無料モックアップPSD素材まとめ Apple Responsive Screen MockUps スクリーンサイズによってレイアウトが変化する、レスポンシブWebデザインを提案するときに役立つ、デスクトップからモバイル端末まで4種類が揃っています。 Workstation Mock Up V2 整理されたワークスペースを上

[fancy_box]海外デザインブログDesignModoで公開された「Primer on Types of Navigation in Mobile Apps」の著者Nataly Birchより許可をもらい日本語抄訳しています。Thank you, @designmodo![/fancy_box] モバイル・アプリケーションのインターフェースを作成するときに、イメージサイズやディスプレイ幅などさまざまな制限を受けますが、ナビゲーションメニューにはたくさんのパターンや種類があります。 特にトレンドとなっているスタイルはスライド式サイドメニューがありますが、この他にもユーザーのアプリの操作感を向上させるナビゲーションメニュースタイルを今回はまとめてご紹介します。 詳細は以下から。 リスト型ナビゲーションメニュー まず基本的なリスト型ナビゲーションメニューから見ていきましょう。リンクがひとつ

海外デザインブログDesignInstructで、シンプルでどんなデザインにも合わせやすい、サンセリフ体のフリーフォント素材を20個まとめたエントリー「20 Free Sans Serif Fonts Every Designer Should Have」が公開されていたので、今回はご紹介します。 テキストを入力するだけでも、スタイリッシュで雰囲気のあるデザインを演出することができるだけでなく、最近のWebデザイントレンドとの相性も良いので、覚えておくと便利なフリー素材かもしれません。 詳細は以下から。 サンセリフってどんなフォント？ 「サンセリフ」をwikipediaで調べてみると以下のように書かれています。 サンセリフ（仏: Sans-serif）とは、セリフのない書体の総称である。セリフとは、文字の線の端につけられる線・飾りで、「うろこ」、「ひげ飾り」、「ひげ」とも呼ばれる。旧来のセ

海外デザインブログSmashiFreakzで、Webデザイン制作の参考にしたくなる、無料UIデザインPSD素材をまとめたエントリー「10 Free Fresh UI Kits for Designer April 2014」が公開されていたので、今回はこちらをベースにブックマークしておきたい、最近のフリーアイテムを一緒にまとめてご紹介します。 定期的にUIデザイン素材をまとめてご紹介しています、こちらも参考にしてみてはいかがでしょう。 フリー素材 無料UIデザインキットまとめ [list type=”star”] [li]配色の参考になりそうな、美しいこだわり無料UIエレメント素材まとめ[/li] [li]配色の参考にしたい、こだわりの無料UIエレメント素材まとめ[/li] [li]配色センスで決める、美しいUIエレメント素材まとめ 2013年秋[/li] [li]2013年トレンド参考、

海外デザインブログWebDesignerHubで、プロ級のブランドレイアウトを作成する、無料PSDモックアップ素材をまとめたエントリー「30 Hi Res Identity & Barnding Mockup Templates」が公開されていたので、今回はこちらを中心にブックマークしておきたいフリーアイテムを一緒にご紹介します。 筆記用具などのステーショナリーグッズはもちろん、iPhoneやiPadなどのガジェットや、最近はカメラやサングラスなどユニークな素材も収録されており、デザインがよりたのしくなりそうなアイテムばかりですよ。 詳細は以下から。 ブランドレイアウトを再現する、無料PSDモックアップ素材まとめ Branding Mock Up Free まるで光があたっているような様子を表現できる、高品質なブランドレイアウトを完成させます。 Stationery MockUp – Wo

海外デザインブログGraphic Design Junctionで、新しく公開されたフリーフォント素材をまとめたエントリー「Stylish Free Fonts For GraphicDesigners」が公開されていたので、今回はこちらをベースに、コレクションに追加したい素材を一緒にまとめてご紹介します。 利用に関するライセンス表記と同時に、ダウンロードリンクが分かりにくい素材は明記しています、参考にしてみてはいかがでしょう。 詳細は以下から。 新作デザインをチェック、毎月恒例フリーフォント素材まとめ 2014年4月度 Clear Sans 太さの異なる8種類のフォントスタイルに加え、Webフォントも一緒に収録されています、ダウンロードはこちらより。 ※　個人、商用利用可能 Octopus 16種類のフォントスタイルを収録した、使い勝手の良いフリー素材パック。 ※　個人、商用利用可能 M

Webサイトやブログ用デザインを作成するときに、必要となってくる素材のひとつがアイコン素材です。幅広いプロジェクトに対応してくれ、編集しやすいアイテムは、いくつかデザインコレクションに持っておくと重宝します。 海外デザインブログSplashnologyで、カスタマイズしやすい新作無料アイコン素材をまとめたエントリー「48 Fresh and Free Flat Icon Sets for 2014 April」が公開されていたので、今回はこちらを中心に個人的に見つけたフリー素材を一緒にまとめています。 そのままWebデザインに利用できるPNGファイルの他、PhotoshopやIllustrator用ファイルで公開されている素材もたくさんあります。テキストや配色を変更できるのはもちろん、どのようにデザインされているのか参考にするのにもぴったりです。 詳細は以下から。 編集もしやすい、無料アイ

まるで筆ブラシやスプレー缶でペイントしたような質感を、Photoshopの「ブラシ機能」を使って簡単に表現することができます。 海外デザインブログCreativesWallでペンキや水彩絵の具、スプレーでペイントできる、無料Photoshopブラシ素材をまとめたエントリー「30+ Sets of Free Photoshop Paint Brushes」が公開されていたので、今回はご紹介します。 詳細は以下から。 ペンキや水彩絵の具でペイントできる、無料Photoshopブラシ素材まとめ Angry Painter Brushes 怒りまかせにペイントした様子を描いた筆ブラシキット。 9 Paint Splatter Brushes スプレー缶でドリップした、デザインの異なる9種類のスプラッターをブラシ素材で。 Midnight Paint 13 Grungy Watercolor Pho

レトロスタイルやビンテージ風バッジやラベルは、デザインアイテムとしても人気の高い素材です。そんな中でも使い勝手がよく、デザイン性の良いベクターアイテムをあつめました。 海外デザインブログVectipsで、カスタマイズ自由なビンテージバッジ、ラベルを100個をあつめたエントリー「100+ Free Vintage Badges That Are All the Rage!」が公開されていたので、今回はご紹介します。 詳細は以下から。 ビンテージ、レトロスタイルのバッジデザイン100個あつめました。 12 Web Badges 12個収録 32 Free Earth Day Vector Badges 32個収録 アース・デイをモチーフにしたエコロジーなバッジデザイン32種類を収録、今回オススメ素材のひとつ。 Vintage Badges Vector Graphic 9個収録 Free Vi

どんなデザイン制作にも対応してくれるPhotoshopは、プラグインや拡張機能をインストールすることでより快適な制作環境を整えることができます。グラフィックデザインだけでなく、Webデザイン制作をより楽に、そして時間短縮なアイテムが揃っています。 海外デザインブログWeFunctionで、よりPhotoshopの快適操作、編集を実現するプラグイン、拡張機能をまとめたエントリー「15 of The Best Time Saving Photoshop Plugins」が公開されていたので、今回はご紹介します。 詳細は以下から。 Photoshopでの作業をより快適にするプラグイン、拡張機能まとめ Velositey 頭のなかにあるレイアウトをすぐにイメージ化し、Webデザインのプロトタイプを作成するデザインキット。 Pixel2Vector ピクセルシェイプを、編集作業がより柔軟なベクターシ

作成したモバイルアプリのコンセプトを、より分かりやすくユーザーに伝えることができるとして、GIFアニメーションを使ったUIデザインコンセプトの表現は、人気のプレゼンテーション方法のひとつとなってきています。モバイルデザイン制作の参考にしてみてはいかがでしょう。 海外デザインブログThe Design Inspirationで、ダイナミックな動きをGIFアニメーションで表現した、モバイルUIデザインをまとめたエントリー「20 Incredible Mobile UI Animations in GIFs」が公開されていたので、今回はこちらを中心に個人的にブックマークしておきたい作品を一緒にまとめています。 詳細は以下から。 ダイナミックな動きが魅力的な、GIFアニメーション付モバイルUIデザインまとめ FaceScan App Concept 顔をスキャンするとプロフィール情報が表示されるア

海外デザインブログAwwwardsで、2013年から2014年3月までに公開されたフリーフォントを100個厳選したエントリー「The 100 Greatest Free Fonts for 2014」が公開されていたので、その中でも商用利用可能なフォント素材をピックアップしました。 いざというときにあると便利なフォント素材、スタイル別にまとめているので、これを機会にフォントコレクションを整理してみてはいかがでしょう。 詳細は以下から。 商用利用OK！ダウンロードしておきたいフリーフォント100個まとめ スタイル セリフタイプフェイス（Serif Typefaces） フォント文字のストロークの端にある小さな飾りをもつ書体。 Bitter Ht Bandera Text Modum Regular Cinzel Font Family Klinic Slab Ainslie Regular

それぞれのデザインにこだわりを魅せた、フラットスタイルの無料アイコン素材60個セット「Freebie: Flat Icon Set (60 Icons, PNG, SVG, EPS, PSD, AI)」が公開されていたので、今回はご紹介します。 自由にサイズ、色を変更できるのはもちろん、Retinaディスプレイまで対応した高解像度アイコンは、制限なく利用できます。 詳細は以下から。 豊富な編集ファイルも魅力的な、フラットスタイルの無料アイコン素材60個セット Flat Icon Setは、素敵なイラストが印象的な60種類のデザインアイコン素材です。Photoshop用PSDはもちろん、Illustrator用EPS＆Aiファイルの他、PNGファイル、SVGファイルでそれぞれ収録されているおり、幅広いデザイン編集に活用できる素材となっています。 どんなデザインにも合わせやすいカラーパレットは

Illustratorを使ったデザインの作り方や方法などを学ぶチュートリアルを昨日のエントリーで紹介しましたが、Illustratorをすぐにでも触ってみたいというときは、ベクターファイルを活用してみてはいかがでしょう。さまざまな設定やテクニックを利用した素材は、ファイルを開くだけでも参考になります。 海外デザインブログGraphic Design Junctionで、無料ダウンロードできる優良ベクター素材をまとめたエントリー「Free Vector Graphics Design Elements」が公開されていたので、今回はこちらを中心にクリエイティブなフリーベクター素材をまとめてご紹介します。 詳細は以下から。 無料ダウンロードできる、参考にしたいIllustratorベクター素材まとめ 3D Infographic Vector Elements 立体的に作成された、インフォグラフ

海外デザインブログDesign Knockで、デザインがたのしくなるIllustratorチュートリアル、作り方をまとめたエントリー「Latest Illustrator Tutorials for 2014 Graphic Designs」が公開されていたので、新作チュートリアルと一緒にまとめてご紹介します。 Photoshopを使ったデザイン作業と併用して活用したい、Illustrator。あたらしくたのしいデザインを、はじめませんか。 詳細は以下から。 Illustratorはたのしい。参考にしたいチュートリアル、作り方まとめ 2014年3月度 地形図をモチーフにしたデザインエフェクトの作り方 Illustratorのペンツールで描いた、等高線のようなパスに、グランジスタイルを組み合わせたお洒落なデザインが魅力的。 印象的なビンテージロゴの作り方 Illustratorのブレンドオプ

毎月Photoshopの新しい使い方やデザインテクニックを活用した作り方、チュートリアルをまとめています。今回は2014年3月版まとめです。 海外デザインブログGraphicsFuel.comで、今後のデザインプロジェクトで利用したい、ユニークなPhotoshopチュートリアル、作り方をまとめたエントリー「A Collection of 15 Fresh Photoshop Tutorials」が公開されていたので、今回は個人的にみつけたチュートリアルを一緒にまとめています。 詳細は以下から。 Photoshopのすごさを体感する、デザインチュートリアル、作り方まとめ 本物そっくりな水滴をデザインする方法 レイヤースタイルをうまく調整することで、リアル感たっぷりな水滴を表現する動画デザインチュートリアル。 炎を使ったシンプルで役に立つデザインエフェクト テキスト文字やイメージ写真のラインに