Webサイトのガイドライン、カラーや文字やアイコンや画像のスタイル、使用するコンポーネントを定義するスタイルガイドが作成できるテンプレートを紹介します。 Style Guide Guide Style Guide Guide Style Guide Guide(誤字ではないです)は、MITライセンスで利用できるスタイルガイドのテンプレートで、企業サイトの納品用にも無料で利用できます。
昨日(2018年1月22日)、Photoshop CC 2018がアップデートされ、次の機能強化が行われました。 1クリックで被写体を選択 「選択とマスク」機能の強化([不要なカラーの除去]オプションの[適用量]のスライダー) 高解像度モニターのサポート強化(Windows Creatorsエディション以降) Microsoft Dialとの連携強化 このなかで注目したいのが「1クリックで被写体を選択」機能。「Select Subject」として、昨年(2017年)11月に発表されたものが、早々に搭載されました。 「Adobe Sensei」というキーワードで話題になっている機械学習による認識によるものとのことです。 [被写体を選択]の使い方 「画像中の主要な被写体をワンクリックで選択できます」と記述されているので、画像内をクリックするのかな?と思ってしまいますが、クリックするのはメニュー
ここ数年で、Macを使う上でなくてはならないものに加わったものに、Keyboard Maestroがあります。 Keyboard Maestroは、QuicKeysと並び、古くからある自動化ユーティリティ。macOSでは標準でAutomator.appもありますが、macOSでIllustratorを使っているなら、Keyboard Maestroがオススメですという紹介です。 きっかけは三階ラボ 2014年くらいに、三階ラボの長藤さん、宮澤さんにお会いする機会があったのですが、「あ、それ、スクリプトでできるよ!」、「それだったら、Keyboard Maestroでできるよ!」と、日々、困り果てていた問題の多くを普通に解決されていてぶっ飛びました。 そこからKeyboard Maestroの旅がはじまります。 3flab inc. | Keyboard Maestro の使い方 – 基本機
指定したカラーをベースに、そのカラーからバリエーションを調査し、Webデザインやイラストで使えるカラーパレットや美しいグラデーションを生成できるテンプレートを紹介します。 Color Creator Templates -GitHub Color Creator TemplatesはBSDライセンスで利用でき、3つのアプリ用にカラーテンプレートが用意されています。 Photoshop Sketch Affinity Designer Color Creator Templatesの使い方 Photoshop用のカラーテンプレートを例に使い方を紹介します。 Color Creator Templatesではテンプレートを使用して、カラーのバリエーションを調査し、カラーパレットを作成できます。通常のカラーツールでは見いだせない2, 3色のカスタムカラーのブレンドモードを使用することもできます。
ベースカラー RGB データ ≫ R : - G : - B : / RGB 平均値 :: / ベースカラー 補色 ::
There are 16,777,216 color hex codes. With so many options, how do you choose the right color? The latest research on color perception tells us that somewhere between 40% to 99% of these colors are indistinguishable to the human eye.* Which begs the question: if we can't see the difference between two colors, why should we waste time deciding between them? What if you could easily narrow down the
Photoshopパネルをツールに応じて切り替える、Workspace Switcherが超便利!狭い画面でも快適に!Illustrator/InDesign版も! Photoshop用神!エクステンション、Workspace Switcher 『手抜きLab@DTPの現場』のten氏による超便利Extensionです。 これを使うと…… ▼普段使いのパネルと、 ▼テキストツール使用時のパネルと、 ▼パスツール使用時のパネル、などを ツールに応じて自動的に切り替えることができます! ノートPCの狭いモニタでも、使用ツールに必要なパネルを常時展開できます。画面が狭いと、パネルってアイコン化していても結構邪魔なんですよね。いちいちクリックして展開するのも面倒だし。 つかいかた CCの場合は… Photoshopウインドウメニューから、「機能拡張をオンラインで参照…」を選択します。Adobe A
Colors are the very basic and important element of any design, you need to be really careful about creating colors for your designs. Today we are talking a little bit about colors in web design and we have collected some good tools and articles to help you master in creating color combinations. Colors considered to be the important factor of any kind of design, they can convey messages, create emo
「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 2016年8月の初投稿から9年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール(17個) ワンクリック、人工知能系ツール(20個) マテリアルデザイン系ツール(4個) Webデザイン・UIデザイン関連ツール(21個) 写真から抽出系ツール(2個) インスピレーション系ツール(14個) グラデーション関連ツール(29個) 配色カラ
イラストレーター(イラレ、Illustrator)で、カラーパレットを作ったのでそれをSketchでも使いたい!例えば、 最近、社内でデザインガイドライン作った! イラストレーター色の管理をするようにした! でも、Sketchに移行しようと考えている...とかとか。 そんな時のために、Sketchでイラストレーターのスウォッチデータを使う方法があります イラストレーターで作ったカラーパレットを出力する イラストレーターで作ったカラーパレットを「スウォッチライブラリ交換用として保存」で保存します。この時の拡張子は 「*.ase」になります スウォッチライブラリ交換用として保存 スウォッチをライブラリとして保存 ase は、Adobe Swatch Exchange の略らしいです ase ファイルをclrファイルに変換する ase ファイルをclrファイルに変換します。clrファイルをSke
起動するとMacのメニューバーに常駐するMacの無料アプリ『Linear』がWEB制作にはもってこいだったのでご紹介。 『Linear』のインストール方法 『Linear』にアクセスして、「Download for Mac」をクリックしてGitHubへ。linear.zipをダウンロードします。 解凍したlinear.appをアプリケーションフォルダへ移して準備OK。 ※アプリ起動時にセキュリティ警告が出て起動できない場合は 「システム環境設定」 → 「セキュリティとプライバシー」 から 「ダウンロードしたアプリケーションの実行許可」 から起動できます。 『Linear』の使い方 『Linear』を起動すると、画面最上層に半透明のパネルがあらわれます。パネルの端にカーソルを移動させるとカーソルの形が変わるので、自由に縮小・拡大することができます。 次の画像のように2本の縦ラインと横ラインの
FontExplorer X Proについて書いているDTP Transitの一番古い記事は、2005年11月30日。 FontExplorer X - DTP Transit Suitcaseから乗り換え、かれこれ、丸11年。愛してやまない、というか、これのないMacは考えられないくらいの位置づけにあるユーティリティです。 FontExplorer X Pro 6.0の新機能など 2016年9月、FontExplorer X Proがバージョンアップして6.0になりました。ここ数年、頻繁なアップデートがあり、その度にバージョンアップフィーを請求されますが、いやいや、ここまでお世話になっていたら安いものだと思います。 とりあえず、新機能や機能強化について、ざっくりと翻訳してみました。 強化項目(勝手な)説明
※2017/04/02 ダウンロードページが削除されたため、リンクを削除しました。 Tych Panel 2は複数の画像を自動的に配置して1枚の画像を作成できるPhotoshopエクステンションです。 挿入方向と画像を選択するだけで、画像を自動的に配置してくれます。 こんな配置ができます いくつか作成例を紹介します。 ↓3行 x 3列の9分割。 ↓大きさがバラバラなレイアウトも作成できます。 ↓縦画像も配置できます。 インストール方法 ダウンロード サイトにアクセスして、「Download」ボタンからzipファイルをダウンロードして、解凍しておきます。 インストール Photoshopを管理者権限で起動します。Photoshopの起動アイコンを右クリックして「管理者として実行」を選択します。 Photoshopメニューの「ファイル」から「スクリプト」 > 「参照」を選びます。 ダウンロード
This weekend I made this little plugin. It arrange tons of icons in formations like the petal arrangement pattern in a sunflower. I love sunflowers 🌻 They call such patterns phyllotaxis pattern. Phyllotaxis describes spiral like patterns — it occurs repeatedly throughout nature. Arrangement of petals in sunflowers for instance. You can read more about Phyllotaxis in case you find it interesting.
10 Sketch Tricks for Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レイヤー間でスタイルをコピペ レイヤーの移動 カラーピッカー 角丸の半径を個別に設定 再利用できるシンボル ツールバーのカスタマイズ iOSデバイスでデザインレビュー Sketchの便利なプラグイン Sketchでプレゼンテーション iPhone, iPadの画面を録画 レイヤー間でスタイルをコピペ レイヤーに同じデザインをコピペしたい時は、カラーコードなどをコピペするのではなく、スタイルをレイヤー間でコピペできます。 レイヤー間でスタイルをコピー ⌘ + Option + C レイヤー間でスタイルをペースト ⌘ + Option + V レイヤーの移動 レイヤーを上下に移動させたい時は、ドラッグ&ドロップの代わりにキーボード
素材集の色を自由自在に変える簡単テクニック。 こんにちは。Keinaです。 本日は、Photoshopで素材集の色を簡単に変更する方法をご紹介します。 デザインするとき、「色」は重要な要素のひとつ。なんとなく色を選んでしまうと、伝えたい印象とは違ったものになってしまいます。素材集の画像を使う時も同じで、そのまま使用すると、つくりたいイメージにあわない場合があります。そんなときは、素材集の画像をイメージにあう色に変更してみましょう。 ▲使用ソフト:Adobe Photoshop CC 2017 ※素材集を加工する場合は、使用承諾範囲を確認し、素材の加工に関して制限がないことを確認しましょう。 1. 「色相・彩度」で色を簡単に変更する方法 単色の画像は、簡単に色が変えられます。ピンクの画像を水色とグレーに変更してみましょう。 ▲使用素材:スタンダードコレクション / analog_frame_
Creative Cloud 2015 Updateから、Creative Cloudライブラリに大きな変化がありました。 CC 2014で導入されたCreative Cloudライブラリは、その時点では“使い捨て”的な共有しかできませんでしたが、CC 2015からグラフィックの「リンク配置」ができるようになったのです。これはワークフローを大きく変えるブレイクスルーになるでしょう。 たとえば、Illustratorでは、「リンク配置」を使うことで、複数ドキュメント間でのアートワークの共有を“シンボル”のように共有できるようになります。 リンク配置の基本 Illustratorドキュメントから[ライブラリ]パネルにオブジェクトを登録します。 [ライブラリ]パネルからそのオブジェクトを配置すると、デフォルトで「リンク配置」されます。[リンク]パネルを見ると、「アートワーク1」の右側にクラウドア
レスポンシブイメージ、使ってますか? ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で! 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも!アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く