[Illustrator] ジグザグ（波状）の図形をつくる方法
海外のサイトやスマホアプリで良く見られるようなジグザグの図形をイラストレーターでつくる方法です。 ↓こんな感じのジグザグ区切りですね。鋭いギザギザから緩やかな波線まで作ることができます。 作成方法 1. 直線ツールで線を描きます 塗りは透明、線幅は1pxにします。 2. 「効果」→「パスの変形」→「ジグザグ」を選びます 3. 「大きさ」や「折り返し」などの数値をお好みに調整します 「滑らかに」を選ぶと、角が丸くなり、「直線的に」を選ぶと、角が鋭くなります。 4. 「オブジェクト」→「透明部分を分割・統合」を選び、そのまま「OK」を押します パス化する前に、一度コピペをして元図形を残しておくと良いですね。 5. 線と同じサイズの長方形を作ります 塗りは黒、線は無しです。 6. 波線と長方形を「整列」で重ねて、２つを選択したまま「パスファインダー」の「全面オブジェクトで型抜き」を選びます 7.
![[Illustrator] ジグザグ（波状）の図形をつくる方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/80700d496edc2261155cbdfc9d82575f0d719934/height=288;version=1;width=512/http%3A%2F%2Fwww.ar-ch.org%2Fwp%2Fwp-content%2Fuploads%2F07_s.png)
ベーシックなストライプのPhotoshopパターン 460個セットを作りました ： 460 Basic Stripe Set
ベーシックなストライプのPhotoshopパターン 460個セットを作りました ： 460 Basic Stripe Set 仕事でストライプのパターンを良く使うので、まとめて作ってみました。ストライプのパターンは、斜め・縦・横の3種類、白と黒（背景透過）、線幅2pxごと、線幅の間隔は等倍・1.5倍・2倍の全460個です。 (stripe.zip:571KB) Zipファイルを解凍後、パターンファイルをPhotoshopにドラッグ＆ドロップするとパターンが追加されます。 商用利用OK、印刷OKです。再配布はNGです。ご使用の際の報告やリンク、著作権表示は不要です。お気軽にお使いください。 ストライプパターンについて 斜めのストライプは、英国式の右上がりです。 線の色が白と黒なので、描画モードを「オーバーレイ」等にすれば、大体どんな色にでもできると思います。 線幅は、1pxと、2～50pxま
【Photoshop初心者向け】知っていると便利な技9つ
Photoshopをさわりはじめて半年未満くらいの初心者の方向けです。それ以上の方はほとんど知っていることだと思いますので、確認程度にざっと見ていただければと思います。 1. レイヤースタイルのグラデーション効果は、描画モードを「オーバーレイ」に グラデーションの部分で色をつくるのではなく、白黒でグラデーションの幅を決めて、描画モードを「オーバーレイ」に。その後、レイヤーの部分で色を変更すると楽です。 2. アンシャープマスクなどのフィルタは、スマートオブジェクトにしてからかける スマートオブジェクトにすると、あとからやり直しがきくので安心です。 3. 単調作業はアクションに登録しておく 例えば写真を決まったサイズに縮小し、軽く色調補正をして保存、という動作があったとき、アクションに登録しておくと便利です。 あとで色調補正を微調整するにしても、最初から作業するより負担が減るはず。 4. 色
photoshopで枠線つき吹き出しをつくるときのちょっとしたコツ
ご存知の方も多いかもしれませんが、最近発見したので覚え書き。 吹き出しって三角の位置を微妙に修正することが多いと思うのですが、枠線つきの吹き出しって修正しづらくないでしょうか？ ※作成・確認環境は、Photoshop CS6です 例えば自分が配布しているSVGの吹き出しもそうなのですが、三角の部分を移動したり大きさを変えたい場合、パスが全て連結されていて動かしにくかったりします。 三角の部分を動かすには、土台の図形と三角部分を別々にすると良いですね。 吹き出しの図形をそれぞれシェイプで描きます。 このとき、吹き出しの三角の方は、パスを閉じないようにします。 ※訂正です、パスは閉じても閉じなくても表示は変わりませんでした。 良く確認せず申し訳ありません…。 2つの図形をちょうど良いところで重ね、ショートカットキーの「Ctrl + E」で結合します。 （レイヤーのところで右クリック→「シェイプ
[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)
Photoshopで手描き風の線をつくる方法
Photoshopで手描き風の線を簡単につくる方法です。可変・色変えできる方法を模索していたところ、今のところこの方法が手軽で一番良いなと思いました。 ランダムな線の画像をパターンに登録する 以下の画像をダウンロードします。 または、自作で好みの線で描いても良いと思います。私はマウスでグリグリと描いたのですが、線は1px、色は#333333くらいにしました。 自作の画像をパターン登録するときは、背景透過にするのをお忘れなく。 ちなみにパターン登録は、「編集」→「パターン定義」でできます。 シェイプで矩形を描き、レイヤースタイルで色をつける シェイプで矩形を描き、塗りを0%にします。 レイヤースタイルでパターンオーバーレイにチェックを入れ、上記の画像を選択します。 色をつける場合は、カラーオーバーレイで、描画モードを「オーバーレイ」にし、色を選択します。 線の幅は1px 〜 5pxが良い感じ
Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
ブログをリニューアルしました | Arch
ブログをリニューアルしました。 UI面、デザイン面、コーディング面のそれぞれで、どのように変わったのか。 少しでも参考になればと思いましたので、まとめてみました。 リニューアルの理由は3つありまして、1つ目は、アクセス数の多い記事が固定化されてしまっていたので、それを流動化したいと思ったことです。 2つ目は、私自身がシンプルなデザインに物足りなくなってしまったので、もう少しにぎやかなデザインに変えたいと思ったことです。 3つ目は、XHTMLという少し古い言語を使用していたので、現在推奨されている最新のHTML5に変えたいと思ったことでした。 UI面 週間アクセスランキングの設置 特にフリー客向けの機能なのですが、新しく、かつ、よく読まれている記事を表示することで、ユーザーの興味をひきやすくなったのではと思います。 また、こちらのページにあるはてぶランキングとは違って、順位に変動
Webサイト制作において、私なりの色選定の考え方
色の選び方って難しいですよね…。 私自身良く迷うので、頭の中を整理するためにも、私なりの色選定の考え方をまとめてみました。 ※色の基本的な知識は既にあるという前提で書いてます。 色の基本的な知識がない方は、こちらを見ておくと良いかと。 色の選定にあたり、大切なことは、「目的」と「ターゲット」の2つだと思います。 目的について 目的とは、『色によって何を表現したいのか、ユーザーにどんなことを感じてほしいのか』ということです。 これをはっきりしておかないと、ユーザーへの色伝達の意図が曖昧なものになってしまいます。 目的の例としては、以下2つが挙げられます。（非常にざっくりとわけていますが…） 1. 企業・ブランドのアイデンティティを出したい 2. 企業・ブランド・商品・サービスらしさや、カテゴリーらしさを出したい 目的はそれぞれのみの場合や、1と2混合で考えられる場合があります。 ターゲットに
4月から無職になりました
3月いっぱいで勤めていた会社から解雇され（業績不振のため）、4月から無職になった管理人ですどうもこんにちは＼(^o^)／ 業績不振で解雇されたというと、「ああ不況なのね…」って感じがしますが、どうやら良く考えるとそれだけじゃないのではと思いました。 なので、ちかごろさいきんのWeb制作業界のことと、制作に携わる人は今後どうしたら良いのか、ということをつらつらと書いていこうと思います。 ※ちょっとネガティブ目線も入ってしまいますが、批判をしているわけではなく、このままで良いのかな、という問いかけです。 ※また、こういう会社じゃだめ、ってことではなく、こういう傾向になってるんじゃ、という考察です。 Web制作会社は二極化が進んでいる まわりのWeb関係の友人に話を聞いていると、Web制作会社は以下の二極化が進んでいると思いました。 A. 安い価格で制作物はそこそこのクオリティ、夜遅くまで対応し
フォントの基本的な選び方
フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 （それに縛られすぎてもいけませんが…（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。） 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分
Webデザインの評価項目をつくる
Webデザインの評価項目というのを、ディレクターやデザイナーの方々はつくっているでしょうか？ 評価項目があると、デザイナーやディレクターだけでなく、クライアントにとってもデザインの基準がわかりやすくなり、目標地点が明確になります。 今までつくったことがなかったという方は、この機会につくってみてはどうでしょうか。 改めて、Webデザインの評価項目をつくるメリットです。 デザイナー、ディレクター、クライアントにとって、デザインを評価する共通認識を持つことができ、三者間で認識のブレが少なくなる デザインの優先すべき項目（もっと企業の色を出したい、など）がわかりやすくなり、それをデザインに反映させることができる デザイナーは、すでに満たされている要素にそれ以上時間をかけることがなくなり、足りない要素に注力できる デザインの評価項目とデザインエレメント一覧表 私はWebデザインの評価項目を、以下のよ
Webサイトの「目的」と企業の「強み」とユーザーの「利益」とデザインについて
Webサイトのデザインをデザイナーさんに頼んで、上がってきたデザインがすごく良いものと、あまり良くないものがあります。 その差はどこにあるんだろう？って考えたとき、その理由の1つとして、マーケティング視点でデザインを考えられているかどうか、ということに気がつきました。 ですので、今回の記事では、デザイナーにあると良い基本的なマーケティングの視点をまとめてみました。マーケティングのことがほとんどわからないというデザイナーさん向けです(╹◡╹) 私が思う、デザイナーにあると良い基本的なマーケティングの視点は、次の3つです。 Webサイトの「目的」がわかる 企業や商品の「強み」がわかる ユーザーの「利益」がわかる では1つずつ具体的にみていきます。 1. Webサイトの「目的」について Webサイトにはどういった目的があるのか Webサイトは、何らかの目的があってつくられています。 よくある目的
デザイン上級者 21の特徴
デザイン上級者は、中級者と初心者と何が違うんだろう？って思った時に、こちらの本が役に立ちました。 『上達の法則 – 効率のよい努力を科学する –』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。 また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。 2. 上手なデザインをするということに高い価値をおいている 上級者は、デザインに対して本気で取り組む度合いが高いため、上手な
デザイナーへのデザイン指示はどのようにしたら良いか？
あなた（ディレクター）がデザイナーへデザインの指示をするとき、どのようにしていますか？ クライアントからのざっくりとしたデザインイメージを伝えるだけで、意図したとおりのデザインを作れる人がまわりにいますか？いたらすごく幸せですね…。 でも、そういったスーパーデザイナーばかりではないと思います。 なので、ディレクターが指示をするときにはどうしたら良いかを考えて実践した結果、うまくいく場合が多かったのでその方法を書いてみました。 デザイナーの能力を正しく把握し、その段階に合った指示をする 私の会社では、デザイナーの能力を大まかに3段階に分けています。 それぞれの段階によって、指示方法を変えています。 第一段階（デザイナー歴 1年未満） デザインレベル こちらが指示した素材を使って、適切なレイアウトができる。 マージンのとり方など、基本的なデザインルールを知らないことがある。 ツールの使い方を熟
思わずおいしそうと言ってしまうシズル感あふれるサイト13個
食品系のサイトにとって、ユーザーにおいしさを訴求することはとても重要ですね。魅力的な写真を使い、思わず「おいしそう」と言ってしまう食欲をそそるデザインのサイトを13個集めてみました。 ちなみにシズル感とは、このような意味です。（Yahoo！辞書へ） 1. おどり寿しホームページ 回転寿司店のサイトです。 寿司ネタの色が黒バックに鮮やかに映えますね。また、薬味の色がネタを引き立てています。 2. Assiette Dojima | アシェット・ドージマ 大阪にあるダイニングゾーンのサイトです。 大きな写真が迫力ありますね。食品の照りやカラフルな食材が食欲をそそります。 3. Soup Stock Tokyo スープ専門店のサイトです。 スープの写真は彩度低めですがしっかりとおいしそうに見えます。サイト全体の洗練された素朴感も良いですね。 4. cinagro | シナグロ 原宿にあるレストラ
プロダクトの品質を高める『フィードバック』
プロダクトの品質を高める『フィードバック』 デザイン⇒フィードバック⇒変更・修正のデザインプロセスをまわして、デザインが良くなっている感じがしなかったり、...
Webディレクターになって良かったことを5つ書いてみた。 | Arch
WebデザイナーからWebディレクターになって早二ヶ月。私がWebディレクターになって良かったことを5つ書いてみました。この記事が、今後ディレクターになりたいと思っている方の参考になればと思います。 (ちなみにうちの会社は完全な分業ではなく、私はディレクションがメインで、制作も少しやります。) 1. デザイン力が向上した あくまで自分比なのですが... 目が肥えた ディレクターになると、デザイナーさんがつくったデザインをチェックする機会が増えます。すると、良いデザインを見分ける目が肥えます。また、自分がデザインするときの引き出しにもなります。 提出されたデザインから学ぶこと 良いデザインからは、こうしたらいいんだな、という多くの解法が得られます。この色遣い良いな、とか、こうしたらメリハリがつくのか、とか。 あまり良くないデザインについては、改善点を考えることが多くなります。こうしたらもっ
Webディレクターって何？私がまわりに良く聞かれる質問とその答え7つ | Arch
Webディレクターになってから、私がまわりに良く聞かれる質問を書き出してみました。これを読めば、Webディレクターとは何かが大体わかると思うので、ご興味のある方はどうぞ。 ※自分の体験をもとに書いているので、他の会社では違う場合があるということをご了承ください...。 1. Webディレクターってどんな仕事をしているの？ 仕事内容は、制作会社によって微妙に異なります。が、概ね以下のことは共通しているかなと思います。 （会社によっては、プロデューサーや営業の人が担当していることもありますね。） 新規・リニューアルのサイト制作時 企画書・提案書の作成 会議やプレゼン資料の作成 サイトのワイヤーフレームの作成 サイトのページリストやサイトマップの作成 仕様書の作成 スケジュールの作成 見積もりや請求書の作成 制作の進行管理時 コピーライティング・デザイン・コーディングの指示 コピーライティン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン制作のインスピレーションになるRSSまとめ | Arch
