コーディングする時のスライス方法とか - CSS HappyLife
珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい！ 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。 ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます！ Photoshopを起動します 何はともあれ、Photoshopを起動します。 これはすごく重要な作業です。 Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。 CS3の頃はサクサクで良かったんですが。 起動したら、psdファイルを開きましょう。 普通のスライス まずは
クックパッドデザイナー片山育美さんが語る「ユーザー目的を達成するためのUI」とは — [画面遷移ワークショップvol.2 レポート] | Startup Dating [スタートアップ・デイティング]
前回、5月に開催した「画面遷移ワークショップ」。その第二回を開催しました（前回の様子はこちら）。二回目となる今回は、日本最大の料理レシピサイト、クックパッドのUIデザイナー、片山育美さんをゲストにお招きしたトークセッション。後半には前回同様ソーシャルゲームの分野で活躍中のポケラボさんからお題を提供していただき、画面遷移を考えるワークショップを開催いたしました。 前半に6月にStartup Datingにインタビュー記事が掲載されて、大きな反響を呼んだ片山さんは、クックパッドに4人しかいないデザイナーの一人。片山さんはクックパッドのPCサイト、iPhoneアプリ、Androidアプリ、iPadアプリなどのデバイスに対応するデザインなども担当しているそうです。仕事以外にも、趣味がアプリ開発だという片山さん。最近制作した「恋人クイズ」というアプリは現在20万ダウンロードを超えているそうです。 こ
iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design
いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patternspttrns
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
WEBデザインの参考にしているまとめサイトをまとめました[ほぼ国内編：24サイト+追加2] | HTML5でサイトをつくろう
皆さんいつもWEBサイトのデザインをする際に何を参考にしていますか？ 気にいったサイトがあったらブックマークをしてストックしておく、WEB系の本を見る、あとはWEBサイトのまとめサイトを見るですよね？ 自分もまとめサイトを見つけるとブックマークして定期的にチェックしていたのですが、いろいろなまとめサイトがありましたのでまとめサイトをまとめてみました。 このほかにもこんななのがあるよというのがありましたら是非教えてください。 TheFWA http://www.thefwa.com/ High Floater http://www.highfloater.com/ ABM | AnotherBookmark™ – Webデザインブックマークサイト http://www.anotherbookmark.com/ Webデザインのリンク集 Webデザインポータルサイト S5-Style http
![WEBデザインの参考にしているまとめサイトをまとめました[ほぼ国内編：24サイト+追加2] | HTML5でサイトをつくろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0366a92f40229090fad09f8bcea2cb9d905fb02/height=288;version=1;width=512/http%3A%2F%2Fwww.html5-memo.com%2Fwp-content%2Fuploads%2F2011%2F08%2FA29.jpg)
ウェブページの重要な箇所を素早く伝える5つのデザインテクニック
Creating Focal Points in Your Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事ではさらに多くのサイトが紹介されています。 はじめに タイポグラフィ イラストレーション ボタン ホワイトスペース デコレーション はじめに ウェブサイトのユーザーは、少しでも速くものを見いだすことを望みます。そしてわたし達ウェブデザイナーは、そのようにサイトをデザインするべきです。これを実現する最も重要な方法の一つがフォーカルポイントです。 フォーカルポイントと、はユーザーの注目をガイドするようウェブページ上に目立つセクションのことです。フォーカルポイントは際立っており、他のコンポーネントとは別のものです。ウェブページの最も重要な外見を強調し、ウェブサイトの主となる目的を伝えることが可能です。 タイポグラフィ タイポグラフィはサイズ、カラー、ス
最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン
ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。
webデザインにおける視線誘導のおはなし | 07design.blog
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ
Webデザインをするときにいつも使っている Photoshop ... あまりに高機能なので、ツールパネルだけでもボタンがいっぱい。はじめて Photoshop に触れる人にとってはちょっと難解なインターフェイスかもしれません。Photoshop を始めたばかりの初心者さん向けの、ツールパネルのまとめです。 Webデザインするときに、いつも使っている Photoshop。でも本当にはじめて Photoshop を使い始めた人にとっては、Photoshop の画面に並んだ、たくさんあるボタン類からして意味がわからないんだと思います…。そー思ってツールパネルのボタンを端から見ていくと、自分でもコレなんだっけ？っていうのがいくつか …。 実は最近友達が Photoshop を使い始めました。全く Photoshop を使ったことのない彼女に使い方を教えてあげるって約束しちゃったので …。 そんな
Situs Judi Rtp Slot Online, Judi Bola, Poker dan Casino Online - ecommr
Sangat Seru Judi Online Terbaik Sediakan Fitur hebat Pemicu Jackpot Memilih situs judi online yang menawarkan bonus dan fitur hebat memang dapat meningkatkan peluang anda untuk menang besar. Namun, penting juga untuk memilih situs yang terpercaya dan memiliki reputasi yang baik di industri perjudian online. Dalam memilih situs deposit bermain judi online terbaik di Indonesia, […] Read More Memperk
カテゴリー別配色アイデア100
2017年6月30日 色彩 配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 ↑私が10年以上利用している会計ソフト！ 配色に関するおすすめサイト COLOURlovers 色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。iPhoneアプリは「ColorSchemer」と
WEBデザインをとにかくたくさん見たい人の為のまとめ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０:phpspot開発日誌
20 Beautiful Free XHTML/CSS Templates | Creativeoverflow ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０が、websitetemplatesonline.com から紹介されています。 Photoshopテンプレートではなく、既にHTMLの形になっているので便利です。 Photoshopのファイルは含まれないようなので、この点は注意したほうがいいかもしれません。 全部見る 関連エントリ シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ハイクオリティでフリーなXHTMLテンプレート61 クールなデザイン満載のXHTML/CSSテンプレート４０種 プロレベルでハイクオリティなXHTML/CSSテンプレート集
女子のための情報サイトデザイン21+4 – Commit Lab
現在業務で女性向けの情報サイトのような物を作ってるのですが、デザインで少々詰まってましまいました。情報サイトとなると自然と文字数も多くなってゴチャゴチャしがちなうえに、元々女性的なデザインを意識して行った事があまりないので中々アイデアが出てこなくて困っていました。 いつも通りGoogle先生に訪ねてみたものの、案外見つからないんですよね。どうしようかなと悶々と悩んだ末に、ググれカスと言われるのを覚悟してwdscratchのフォロワーさん達に参考になりそうなサイトを教えて頂きました。 という事で今日はGoogle先生とwdscratchのフォロワーさん達が教えてくれた女子向け情報サイトをご紹介したいと思います。 今回協力して頂いた皆さん、本当にありがとうございました。助かりました。 追記1：ひとつ掲載漏れがありましたので修正しました。 追記2：コメント欄でご紹介いただいたサイトを追加いたしま
人気がある8つのウェブデザインのスタイルから学んでおきたいポイント
人気があるウェブデザインのスタイルは良い悪いに関わらず、効果的に機能し人々を魅了する何かをもっています。 それぞれの主な特徴とそれがなぜ機能するのか、8つのウェブデザインのスタイルについて紹介します。 A Detailed Look into Popular Styles in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. Illustrations 2. Printed Paper 3. Realism 4. Imageless & Typography-Focused 5. Minimalism 6. Vintage Look 7. Large Images & Photo Backgrounds 8. Rich & Sleek User Interfaces おわりに はじめに さまざまなデザイナーがいるように、敬意をはらう多くのウェ
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブWebデザインのサイト設計・実装・確認に役立つツールとリソースのまとめ
Designers Toolbox: OS Form Elements
IDEA * IDEA
WEBデザインの見本帳｜WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!!