プロのWebデザイナーが使用している人気のツール、フォント、ワークフローなどのまとめ -Web Design Trend Report
プロのWebデザイナー、デベロッパーが実際に作業しているファイルを元に、Webデザインのトレンドをツール、カラー、フォント、エフェクト、ワークフローの観点から調査したレポートを紹介します。 安定して人気のあるトレンド、変化しているトレンドをチェックできます。 2016 Web Design Trend Report デザイナーとデベロッパーのコラボツール「Avocode」で利用された1,127,302のPSDとSketchファイルに基づき、2016年のデータとしてまとめたものです。 レポート公開にあたり、私もほんの少しだけ協力しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザイナーが使用しているツール デザインのコンポーネント化 ファイルのリビジョン ファイルの容量 Webデザインでもっとも人気が高いフリー
こんな簡単でいいの？便利すぎるPhotoshopのプラグイン23選
デザイン制作の大半をPhotoshopで作業する人も多くいらっしゃいます。 そんなPhotoshopですから、自分仕様に環境を整えておくことで作業の快適具合も大きく変わってきます。 今回は、Photoshopでの作業を効率化する使い勝手の良いプラグインを28個に絞りご紹介します。 フォトショッププラグインとは、標準機能を拡張するファイルのことです。必要に応じてインストールすることで作業効率を飛躍的にアップさせることが可能です。 全てインストールする必要はありませんが、気になるものがあれば是非一度使ってみてください。 便利すぎるPhotoshopのプラグイン23選 1.Velositey http://dandkagency.com/extensions/velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなど
Adobe製品の代わりに使える無料アプリ10+
2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の
15.4. 画像分割...
This filter is a simple and easy to use helper for creating sensitive images to be used in HTML files. The filter slices up the source image (like the Slice Using Guides command does) along its horizontal and vertical guides, and produces a set of sub-images. At the same time it creates a piece of HTML code for a table saved in a text file. Every table cell contains one part of the image. The text
WebデザインのPhotoshop納品で間違ったことはしていませんか？
1pxのズレはコーディングできないデザイン！ DTPの世界でもグリットシステムは利用し、数値を利用して配置するデザインは基本中の基本ですね。 しかしながら、マウスを引っ張って配置するようなデザインをして、数値を利用したデザイン配置をしないデザイナーが存在します。 感覚だけで配置するデザインなので、1pxのズレなども多く発生します。このようなデザインをコーディングには大変なことなります。正直言うと、コーディングできないデザインなのです。 そんな当たり前のことができていないデザイナーが多い？ことから、海外では「photoshopetiquette」Photoshop エチケットというコンテンツがありましたのでご紹介いたします。 日本でも同様に起きていますね！弊社でもこのようなデザイン、ファイルを納品されて困ったケースがあり、受講生に聞いても同じ悩みがあるようです。 プロとして最低限のマナーなの
「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ！
Photoshopでデザインカンプを作成して、いざコーディング！となると面倒くさいのが画像のスライス作業。 その画像のスライスを超絶楽にしてくれるツール「Slicy」を今さらながら導入しましたので使い方をご紹介。 レイヤー・グループに名前を付けて保存 アプリはMac App StoreでDLでも良し、公式サイトから体験版をダウンロードするも良し。 試しにこんなカンプを作成してみました。世界中のイケメンを紹介する、IKEMEN.comです。第一回目のモデルから頓挫しております。 データができましたら、切り出したいパーツのレイヤーorグループに名前（○○.jpgや○○.png）を付けて保存します。 あとはその保存したPSDデータをSlicyにぶち込むだけ。 見事、名前を付けた通りに画像がスライスされました:) あとはドラッグアンドドロップか、画像を選択して上のSaveボタンをクリックして任意の
Slicyはあっと驚くほど便利だった。 - colopixie
Slicyは、PSDをD&Dするだけで、Photoshopでレイヤーやフォルダに指定した方法で名前をつければ書きだしてくれるアプリです。 これがめっちゃ便利！驚いたたまげた。 App Storeで買いました。 今回は、Slicyの公式のデモファイルを使って、解説していきます！ちょうべんり！ 公式のデモファイルは、下記からダウンロードできます（いきなりZIPダウンロードになります） 通常 (Basic Tagging) 「Basic Tagging」のフォルダーを開き、PSDを開いてみましょう。 PSDを開くと、フォルダーやレイヤーに”.png”や”.jpg”など追加します。 そうすると・・・？ そのPSDを”Slicy”にドラッグアンドドロップすると、ぽこん！と先ほどの”.png”のついたフォルダーやファイルが出てきます。 これを上の”Copy”を押して全て保存するか、個別のファイルをドラ
新しいものが大好きなグッドパッチで5月に話題になったアプリ、サービス、デザインまとめ | Goodpatch Blog
5月も終わりに近づいてきました。今月もGoodpatch社内で共有された新しくておもしろいデザインやアプリ、Webサービスをご紹介します！今月は社内でSketch.appを始めとする様々なWeb制作ツールが共有されました。まだローンチされてないものもありますが、今後よく使うツールになるかもしれないものもあるかもしれないので要チェックです！ 先月の同様のまとめ→ 「新しいものが大好きなグッドパッチで4月に話題になったアプリ、サービス、デザインまとめ」 Web制作ツール BRIEFS http://giveabrief.com/ プロトタイプが作成できるアプリです。iPhoneやiPadのデバイスで検証することが可能です。ちなみにこのアプリは最近リリースされ、Goodpatchが一番最初に購入したみたいです。 Sketch iOS Mirroring http://bohemiancoding
Webデザインのタネ | 未経験からWebデザイナーを目指した私が、Web制作のスキルアップのためのTipsをお届けします
Web制作の現場では、日々新しいデザインのインスピレーションを得るためにギャラリーサイトを活用しています。しかし、数多くあるギャラリーサイトの中から、自分の目的に合った適切なサイトを見つけ出すのは意外と難しいものです。 この記事では、複数の...
これは便利！レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
これは便利！レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
A Beginner’s Guide to Wireframing | Envato Tuts+
How to Create a Wireframe Follow these steps and tips to introduce wireframing into your own design process. Step 1: Getting Inspiration Since a picture can paint thousand words, take a look at I ♥ wirefames. You’ll be able to get a quick overview and visual understanding of how other designers are handling their wireframing process. Perhaps also grab this nifty browser bookmarklet, Wirify which e
ひとりでWebサイトを作れるまでに必要な本や記事集めました 〜①デザイン編〜
「Webサイトを作れるようになりたいけど何から始めればいいかわからない」そんな人のために完全な素人の人がひとりでWebサイトを作れるまでに必要な本や記事集めました。 この記事テーマは３つの記事に分かれています。 一つ目は今回の、 完全素人がひとりでWebサイトを作れるまでに必要な本や記事集めました 〜①デザイン編〜 後日公開予定の、 〃 〜②コーディング編（HTML&CSS）〜 〃 〜③集客・Webマーケティング編〜 以上の３つです。 Webサイトの制作手順 初めての方は「Webサイトをどういう順番で作るか？」について知らないと思いますので、説明します。Webサイトを作成し、公開してたくさんの人に見てもらうまでには大きく７つのステップがあります。 ①どんなWebサイトにするか考える（企画） Webサイトを作るためにまずはどんな目的で、誰に、どんな情報やサービスを届けたいのかを考え
美しくて機能するウェブデザインを作成するPhotoshopの7つのテクニック
クリーンで、エレガントで、美しく、そしてしっかりと機能するウェブデザインを作成するのに役立つPhotoshopのテクニックを紹介します。 7 Photoshop tips for designing clean and modern websites [ad#ad-2] 下記は各ポイントを意訳したものです。 1. Space(ホワイトスペース) 2. Depth(奥行き) 3. Detail(ディテール) 4. Definition(明確) 5. Interest(興味) 6. Perspective(遠近法) 7. Readability(リーダビリティ) 1. Space(ホワイトスペース) スペースはボックスやラインやグラフィックなどを使用しないで、デザインエレメントの見た目での分離を可能にするもので、モダンデザインの中でも最も重要なテクニックです。これはコンテンツのプレゼンテーショ
時間の節約になるWeb制作関連ツール 12+1
2013年4月2日 便利ツール Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう！今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ！」と思ったWeb制作に関する便利ツールを紹介します。 ↑私が10年以上利用している会計ソフト！ Photoshopテンプレート まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ入れてます。グレーのエリアがファーストビュー。結構昔に作ってずっと使ってる感じです。 » Photoshopテンプレートをダウンロードする Instant Blueprint http://instantblueprint.com/ Webサイトを作る際の最初のステップを楽にしてくれるサイト。CSS, images, JSな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://dandkagency.com/velositey/
これはスゴ過ぎ！Bootstrap 3のインターフェイスの全てを再現したPSD素材 -Bootstrap 3 PSD
新着記事
洗練されたデザインのPSD素材が無料でダウンロードできるサイトのまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP