ウェブページで使用される最近のさまざまなコンポーネントをまとめたPSD素材
ヘッダやフッタ、打ち出しエリア、コンテンツエリア、ポートフォリオ、お問い合わせなど、縦長1ページで使用されるさまざまなコンポーネントを収録したワイヤーフレーム用のPSD素材を紹介します。 プロトタイプを作成する時にゼロから始めるのではなく、こういったリソースをブレーンストーミングの際のベースにするのもいいですね。 One page website wireframes ダウンロードできる素材のフォーマットはPSDで、シェイプで作られているので、カラーやサイズ、配置の変更も簡単に行えます。 そのコンポーネントの一部を下記に紹介します。
ウェブデザイナーの勉強にいい！デザインの基本原則からPhotoshopの実践的なテクニックまで学べる無料のeBook -Pixel Perfect Precision 3
デザイナーさん・ディレクターさんをはじめ、ウェブデザインに携わる全ての人に必携です！ デザインの基本原則をはじめ、Photoshopを使った実践的なさまざまなテクニックが学べるeBookを紹介します。無料なのに市販の書籍に負けない、いや人によってはそれ以上の価値ある内容がぎっしり詰まってます。 Pixel Perfect Precision 当ブログでもお馴染みのPixel Perfect Precisionの第3版が、昨日リリースされました（パチパチパチパチ） 内容も大きくバージョンアップし、ページ数も165ページから214ページへと大増量。 デザインにおける、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の
ポートフォリオサイトの作り方
就活に使うポートフォリオサイトってどんな手順でどんなものを作っていいかよくわからず、制作した当時はとても悩んでいました。 今回は、そんな実体験を元にしたポートフォリオサイトの作り方のポイントをご紹介します。 なぜwebデザイナーの就活にポートフォリオサイトが必要なのか ポートフォリオは自分自身のデザインスキルや技術スキルの作品集。自分がどんな制作者で何が得意なのか、何が出来るのか、制作したサイトを見れば大体分かります。 webデザイナーにとってのポートフォリオは自分のちからを相手に知ってもらう大事な武器ですので、時間がないからといって片手間で作ったりせず、綿密に計画してフルパワーで作り上げる必要があります。 ポートフォリオを作る前の下準備 作品の構成要素 ポートフォリオに制作実績を掲載する時、下記の6つは載せておきましょう。 サイトのタイトル サイトのURL サイトのスクリーンショット 制
紙の質感にこだわったグランジスタイルのテクスチャ素材
画像に不透明度50%オーバーレイで重ねてみました 写真：Snowboard Jump ダウンロードできる素材は10種類！ サイズは3,000x2,000pxの高解像で、フォーマットは.jpgです。 その中からいくつか紹介します。
ロゴの扱い方でプロとアマの差が出る。アイソレーションゾーンとレギュレーション・ビジュアルアイデンティティについて / Maka-Veli .com
Webサイトを眺めていると、よくロゴの扱い方が雑な物をよく見受けられます。どうもWebの場合はそれが多く見られる気がします。「印刷をしない」 からでしょうか？僕も当時、よく叱られてました・・・ アイソレーションゾーンとは アイソレーションゾーンとは、ロゴ等の周りにある『余白』の事です。 ロゴ周りでなくても、キャッチコピーやタイトルの周りに取ることが多いはずです。 タイトルやキャッチコピーなどの場合は、 ジャンプ率を高めに設定する場合は2~4倍くらいでも良いと思います。 逆にジャンプ率を低めに設定した、あまり強調を必要としない場合でも、 1つ分くらいは空けるとすっきりしますね。 スペースを上手く使える人はプロデザイナーっぽいですよね。 ホワイトスペースは「無駄」じゃありません。 隙間があるからといって、あれこれ詰め込むのはいかにも素人っぽいです。 ロゴレギュレーション 大
Design a Beautiful Website From Scratch | Envato Tuts+
Have you ever wanted to design a beautiful website but just didn't know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I'm going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I wi
Photoshop Etiquette: A Guide to Discernible Web Design
They say a good designer is a meticulous one. “Sweat the details” and all of that. But how well does that ethos check out when we’re passing along PSDs? Take a look at a recent comp. Layers named? Original assets preserved with masks? We may be detail-oriented when it comes to prescribing layout and type, but the organization of our artwork suffers as a means to an end. Efficiency masquerades as g
ゲームUIの制作で気をつけていること Photoshop編Hikutsu log | Hikutsu log
Web デザイナーの時から Photoshop 派だけど、ガイドライン的な？マニフェスト的な？ものとしてオンラインゲームの UI を制作する上で気をつけていることをメモとしてまとめた。参考にしたのは http://photoshopetiquette.com/ （すばらしい！全デザイナーが読むべき） ゲームのUIを担当してまだ1年半くらいなので、多くのUIデザイナーには当たり前と思われるかも…。しかし自分が今のプロジェクトはじめるときにこれらを知っていたら大いに無駄が省けたのにと思ってる。 ちなみに今のプロジェクトはPCブラウザ向けのオンラインゲームでFlashで作られてる。 プロジェクトや会社によってはちゃんとした制作ガイドラインがあったりするのかな。Photoshop の作業を楽する方法が気になる。（JSXとかも） ファイル PSD は各画面毎に分割する Photoshopet
Photoshopで線画抽出する方法 〜手書きイラストをスキャンした場合〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近Photoshopをゲットしたライターのしゅーへいです。 LIGデザイナー陣のデザイン技術をチラチラ見ながら、Photoshopの勉強をしております。ちなみに打倒、王さんです。 今回の記事は、手描きのイラストをデジタルデータ化する方法です。 必要な物は「スキャナ」と「Photoshop」です。今から紹介する方法は、線画でも利用可能なので覚えておいて損はないです。 ストーリー 家にあった中二病ノートに2012年4月に書いたイラストというか文字がありました。なんか「イイナ・・・。」とか思ったので、このイラストをデジタル化しようと思います。 スキャンする まずはスキャナを使ってスキャンします。 320dpiのTIF形式でスキャンしました。綺麗にスキャンできるならJPEGでも良いと思います。 Photoshopでの作業 次に、Photoshopでの作業に移ります。 余計な部分の除去 そのままス
プレビュー至上主義 - cmu12
「プレビュー至上主義」 プログラマが「テストファースト」を唱えるなら、デザイナが主張すべきは何? それが「プレビュー至上主義」。書くより先に見る、書きながら見る、しかもほぼ最終成果物に近い形で。 河村 奨 (かわむらつとむ) これはCreators MeetUpで話したスライドです。ライブプレビューしながら、jade + Gruntで作っています。興味あるかたはこちらのGitHubも合わせてどうぞ。 iPhoneや大きめの画面でも見られるよう調整しました。(2014/1/19) 好きなことはなしていいらしい。なにはなそう? レスポンシブ、インブラウザデザイン、脱Photoshopの波など、ここ数年、色々ありました。それをふまえて... ライブプレビュー 少なくとも、ライブリロード ロジックレステンプレート (たぶん時間ないので、よかったら後で〜) GUIツール不在のWEBデザイン業界 今年
Startup Weekend Bay Areaのニューロゴが完成！そのデザインプロセスを紹介
東京や京都で開催され、日本でも最近話題になっているスタートアップウィークエンド。 このイベントでは、週末の52時間を利用し、起業家志望者とスタートアップ参加希望者がチームを作り、アイデアからプロダクトのデモまでつくりあげる。イ ベント当日は投資家やスタートアップを支援するメンターも参加する(btrax社CEOのBrandon K. Hillはベイエリアにおけるデザインメンター)。 シアトルで発祥し、現在では世界各地で定期的に開催され、資金調達やエクジットなど、幾つかの成功チームも輩出している。 つい先日、Startup Weekend Bay Areaの ロゴがbtrax社によってリニューアルされた。メインのロゴをベースによりサンフランシスコベイエリア/シリコンバレーの雰囲気を伝えるのが目的であ る。今回はそのデザインプロセスの裏側や、コンセプト、問題解決に対するアプローチ等を、ロゴが出来
CAREER HACK | WEB・IT業界で働く人々の人生を少し豊かにするメディア
4月から新社会人となるみなさんに、仕事にとって大切なこと、役立つ体験談などをお届けします。どんなに活躍している人もはじめはみんな新人。新たなスタートラインに立つ時、壁にぶつかったとき、ぜひこれらの記事を参考にしてみてください！
CSS Nite in Ginza, Vol.68フォローアップ（2）松田さんのセッション｜CSS Nite公式サイト
CSS Nite in Ginza, Vol.68フォローアップ（2）松田さんのセッション 記事公開日：2013年4月 2日（火） 2013年3月21日（木）、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.68のフォローアップとして、松田直樹さん（まぼろし）の『HiDPI時代のFireworks』のスライドを公開します。 参照リンク Design Cutting Edge iOS Apps With Adobe Fireworks バシャログ - Retina対応用にページを分けるFireworksコマンド creative tweet - 画像をRetina対応で書き出しするFireworksの拡張機能作ったよ。 iOSアプリ - LiveView Subtle Patterns（テクスチャ配布サイト） Adaptation for Retina
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
「Webサイトの配色で困った！」→「HUE/360使えば良いじゃない」
Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
デブサミ2013（Developers Summit 2013）Action! 1日目のデザインセッション「デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜」の発表資料（2013年2月14日） -------------------------------------------------- 途中、時間がなくて話せなかったところも入っています（そこがかなりいい話だったりする）ので、やっぱりここも実際に聞きたい！という方はまたどこかで呼んでくださいm(_ _)m よろしくお願いします。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
漢字も使えて見出しやキャッチコピーにいい感じ、やさしいデザインのフリーフォント -ロゴたいぷゴシック
ロゴを作る時に知っておきたい11の基本ルール
CINRA.STORE - iPhoneケース,雑貨,ファッション,文房具,プレゼントのセレクトショッピングサイト
Webクリエイターズマニュアル
