[Photoshop]マスクの方法まとめ
Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。 それぞれの作成方法をご紹介します。 クリッピングマスク レイヤーマスク ベクトルマスク（CS6, CC） ベクトルマスク（CS5？以前） クリッピングマスク すぐ下にある下層レイヤーのオブジェクトの形に切り抜くマスクです。 一番簡単なマスクですが、オブジェクトを動かす時に、マスク部分も選択しなければいけないという煩わしさもあります。 01) 切り抜きたい形のオブジェクトを作成します。 パスの図形でも、フリーハンドの図形でも大丈夫です 02) 切り抜きたいレイヤーを、その上に置きます。 03) レイヤーの間を、「Alt+クリック」します。 アイコンが写真のように変化し、マスクがかかりました。 調整レイヤーも同じようにマスクがけできます。 レイヤーマスク 選択
![[Photoshop]マスクの方法まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/bb45a436e313479c083a441149c4b60b22112d10/height=288;version=1;width=512/http%3A%2F%2Fwww.ar-ch.org%2Fwp%2Fwp-content%2Fuploads%2F05_s1.png)
【jQuery習作】テキストエリア入力・保存後反映＆再編集の切り替え
COOKPADさんのレシピ登録ページにあるような、テキストエリアに入力・保存後反映され、再編集もできるようなものをjQueryで作ってみました。 サンプル＆ソース サンプルはこちら （IE8以上、Chrome、Firefox、Safariで動作確認済です） 挙動の流れは以下です。 テキストクリック ↓ テキストエリアに切り替え ↓ 保存＆再編集。取消をクリックすると内容はリセットされる。 HTML $(function() { var myTextBox = $(".textBox"); var myDefault = $(".default"); var myEdit = $(".editArea"); var myItem = $(".item"); var myPreserve = $(".preserve"); var myBecome = $(".become"); var my
【jQuery習作】ツールチップ
現在通っている @YumiSora 先生のJavaScript講座で習ったことを応用して、シンプルなツールチップを作ってみました。 ツールチップがページに1つの時 サンプル1（別窓で開きます） 「？」にカーソルを当てると、吹き出しが表示されます。 （IE8以上、Chrome、Firefox、Safariで動作確認済です） HTML $(function() { //tooltip 1つのとき var tooltip = $(".tooltip"); var balloon = $(".balloon"); balloon.css("display","none"); tooltip.hover(function () { balloon.css("display","block"); }, function () { balloon.css("display","none"); }); }
デザイン上級者 21の特徴
デザイン上級者は、中級者と初心者と何が違うんだろう？って思った時に、こちらの本が役に立ちました。 『上達の法則 – 効率のよい努力を科学する –』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。 また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。 2. 上手なデザインをするということに高い価値をおいている 上級者は、デザインに対して本気で取り組む度合いが高いため、上手な
Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方
TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。（現在のデザインになってからだいぶ経っており、今更な感じですが…）その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字（現在地表示） アイコンと文字（通常表示） ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねｗ それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook（アプリ） ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出
[Photoshop] シンプルで、きっと使い勝手の良いパターン素材
コツコツと作りためていたPhotoshop用のパターン素材を配布してみます。 下の画像だとわかりづらいですが、背景がグレーの部分を透過しているものが多いです。 なので色を重ねたり、描画モードを変えたりして色々と組み合わせて使うことができます。色や描画モードによって表情も変わってくるので、ぜひお試しください。 使い方 ダウンロードしたzipファイルを解凍する。 パターンファイルを選択し、開いているPhotoshop内にドラッグする。 それで追加されなければ、『レイヤースタイル』→『パターンオーバーレイ』→パターンのサムネイルクリック→右の設定アイコンをクリック→『パターンの読み込み』を選びます
![[Photoshop] シンプルで、きっと使い勝手の良いパターン素材](https://cdn-ak-scissors.b.st-hatena.com/image/square/828fb7b3035595c8262e48beaa0830a02296e031/height=288;version=1;width=512/http%3A%2F%2Fwww.ar-ch.org%2Fwp%2Fwp-content%2Fuploads%2F0404_s.png)
[Photoshop] 描画色やグラデーションに沿って変化する線の作り方
先日のグラデーションの記事に関連したエントリです。Photoshopで描画色やグラデーションに沿って変化する境界線の作り方を書いてみました。この境界線は、「光彩（内側）」で作ります。 設定方法 レイヤーをダブルクリックし、「レイヤースタイル」の小窓を開きます。 「光彩（内側）」を選択し、描画モードをグラデーションオーバーレイの描画モードと合わせます。 ここでは「ソフトライト」にします。 （「スクリーン」は色が出ないので、乗算などにすると良いと思います） 色を「#000000」にし、チョークを「100%」、サイズを好きな数値にします。 不透明度で色の濃さを調整します。 下の画像は上記の設定で、シェイプの色だけ変えたものです。描画色によって線の色が変わり、またグラデーションの薄い方から濃い方へ色が変化しているのがわかると思います。 色を何度も微調整し、線の色もあわせて変えたいときは、この方法が
![[Photoshop] 描画色やグラデーションに沿って変化する線の作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7e921247d12e406521e4b472546558d67fd7cb9/height=288;version=1;width=512/http%3A%2F%2Fwww.ar-ch.org%2Fwp%2Fwp-content%2Fuploads%2F0305_s1.png)
Photoshop ややこしいパスの操作をおさらいする
Photoshopに限らないのですが、パスの操作は慣れが必要で、またわかりにくかったりもしますね。 うちのブログに、「Photoshop パス」で検索してくる方が多く、しかしそれに応えられる記事がなかったので書いてみました。 ややこしい原因 ペンツールの挙動がつかめない、読めない 操作をするのにいろいろなツールがあって把握できていない しかし、パス操作は、基本のペンツールと2つのショートカットを覚えれば簡単に理解できます。 基本的に、ツールの変更はショートカットを使って行います。 そうすることで時間短縮＆操作がしやすくなります。 それではいくつかの例をもとにパスの操作を解説します。 1) アンカーポイントを移動する 角丸での大きさ変更を例にします。 ペンツールを選択し、Ctrl (command) を押してパス選択ツールにし、角丸図形をクリックします。 大きさを変えたい辺の4点を囲むように
coconala（ココナラ）のリデザインを担当させていただきました
7月3日に公開されたココナラ（運営会社：株式会社ウェルセルフ）のリデザインを担当させていただきました。 ココナラをどのようにデザインしていったか、またデザインの特徴などを書いてみましたので、参考になればと思います。 そもそもココナラとは？ 500円で個人の経験・知識・スキルを売買できるWebサービスです。 自分の得意なことをサービスとして売ったり、他の人の得意なことをサービスとして買ったりすることができます。 購入者一人ひとりに合わせたオーダーメイドの回答がもらえることが特徴です。 私の担当領域 デザインがメイン作業で、単純なページに関しては情報設計＋デザインを担当しました。 また、1からのデザインではなく、元々のベースがあって、それの作り替えという感じでした。（なので、リデザイン） 情報設計は @satoshimmyo さんが行い、その指示のもとデザインを作成していきました。 デザインプ
テキストのメリハリをつける方法7つ
私のデザイン修正で一番多い指示が、「メリハリをつけてください」で、以前はどうすれば良いかわからず困っておりました…。(今も時々わからなくなりますが…) 最近ようやくどうすればメリハリがつくかわかってきたので、その方法をまとめてみました。 「メリハリをつけてください」の修正意図は、目立つべきところが目立っていないので、重要な部分を視覚的にはっきりさせてください、ということだと思います。 例として、以下のような見出しとテキストをもとに考えてみます。 （メリハリをつける場合、サイト全体のバランスをみてつけることが必要ですが、ここではわかりやすくするため、見出しと説明文のみで考えています） （引用：Wikipedia: カメラ http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%A9） 私の場合、メリハリをつけるのは以下7つの方法が多いです。
Photoshopで手描き風の線をつくる方法
Photoshopで手描き風の線を簡単につくる方法です。可変・色変えできる方法を模索していたところ、今のところこの方法が手軽で一番良いなと思いました。 ランダムな線の画像をパターンに登録する 以下の画像をダウンロードします。 または、自作で好みの線で描いても良いと思います。私はマウスでグリグリと描いたのですが、線は1px、色は#333333くらいにしました。 自作の画像をパターン登録するときは、背景透過にするのをお忘れなく。 ちなみにパターン登録は、「編集」→「パターン定義」でできます。 シェイプで矩形を描き、レイヤースタイルで色をつける シェイプで矩形を描き、塗りを0%にします。 レイヤースタイルでパターンオーバーレイにチェックを入れ、上記の画像を選択します。 色をつける場合は、カラーオーバーレイで、描画モードを「オーバーレイ」にし、色を選択します。 線の幅は1px 〜 5pxが良い感じ
【商用無料】SVG形式のシンプルなベクターアイコン60個セット
自作アイコンがたまってきたので、特に自分が良く使うシンプルなアイコンを配布してみます。SVG形式でイラストレーターで編集できます。アイコンは、商用無料でクレジット表記なしでお使いいただけます。 ご使用にあたって 以下を守ってお使いください。 禁止事項 × 再配布、またはダウンロード可能な状態にすること × 販売 × 素材への直リンク 許可事項 ○ パスの変更・着色・拡大縮小などの加工 ○ 商用・非商用サイトでの使用 ○ Web、プレゼンなどの資料、ソフトウェア、印刷物への利用 ある程度縮小しても、視認性を保てるようにつくりました。また、シンプルなので、どんなサイトでも使えるかなと思います。お役に立ちましたら幸いです。
ステレオタイプ的デザインのメリット、デメリットについて考えてみた
ステレオタイプ的デザインのメリット、デメリットについて認知科学・社会心理の視点から考えてみました。このメリットとデメリットを理解しておくと、デザインにちょっと役立つのではと思います。 参考書籍は以下です。 脳は絵をどのように理解するか―絵画の認知科学 被服と身体装飾の社会心理学〈下巻〉―装いのこころを科学する ステレオタイプ的デザインとは？ そもそもステレオタイプ的デザインとは、かわいいなどのイメージを表現したいとき、個人や集団が思い浮かべることが多い要素（色、形、モチーフなど）で構成されたデザインのことです。(これは私の中の定義であって、広く世間一般で認識されていることではないのですが…) たとえば、「フリル」や「パステルカラー」という要素は、かわいらしさや少女性を表すのではないでしょうか。 デザイナーはこのステレオタイプを利用してデザインすることも多いと思います。 ステレオタイプ的デザ
プロダクトの品質を高める『フィードバック』
プロダクトの品質を高める『フィードバック』 デザイン⇒フィードバック⇒変更・修正のデザインプロセスをまわして、デザインが良くなっている感じがしなかったり、...
アイコンの役割や使い方をおさらいする
リニューアル後のGmail、そのアイコンの意図がわかりづらくて、使いづらいなーと思ってました。 なので、どうしてわかりづらいのか、とか、アイコンの意図が読めないとどうなるのかを考え、またアイコンって重要だなと再認識したので忘れないようにエントリです。 そもそも、アイコンの役割とは？ そもそものアイコンの役割とは、機能などを絵（グラフィック）におきかえて、わかりやすく示すことです。 ただ、絵というのは、意味の伝達が多義的になります。 それが大きな利点でもあるのですが、機能を示すために使うときは、意味が一義的になるようにする必要があります。 ユーザーを混乱させないようにする ユーザーがアイコンから意味をうまく読み取れないとき、迷って時間がかかってしまったり、最悪使うこと自体をやめてしまうかもしれません。 そのような機会損失を防ぐために、アイコンの使い方を考えたり、意味の明瞭なアイコンを作成する
レイアウトの基本的な型と、レイアウトからデザインまでの流れ
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped
フォントの基本的な選び方
フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 （それに縛られすぎてもいけませんが…（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。） 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
