納品用のWebサイトのスタイルガイドが簡単に作成できるHTMLのテンプレート -Style Guide GuideWebサイトのガイドライン、カラーや文字やアイコンや画像のスタイル、使用するコンポーネントを定義するスタイルガイドが作成できるテンプレートを紹介します。 Style Guide Guide Style Guide Guide Style Guide Guide（誤字ではないです）は、MITライセンスで利用できるスタイルガイドのテンプレートで、企業サイトの納品用にも無料で利用できます。
Sketchでイラストレーターのスウォッチデータを使う方法 - Qiita
イラストレーター（イラレ、Illustrator）で、カラーパレットを作ったのでそれをSketchでも使いたい！例えば、 最近、社内でデザインガイドライン作った！ イラストレーター色の管理をするようにした！ でも、Sketchに移行しようと考えている...とかとか。 そんな時のために、Sketchでイラストレーターのスウォッチデータを使う方法があります イラストレーターで作ったカラーパレットを出力する イラストレーターで作ったカラーパレットを「スウォッチライブラリ交換用として保存」で保存します。この時の拡張子は 「*.ase」になります スウォッチライブラリ交換用として保存 スウォッチをライブラリとして保存 ase は、Adobe Swatch Exchange の略らしいです ase ファイルをclrファイルに変換する ase ファイルをclrファイルに変換します。clrファイルをSke
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
アプリ制作でプロトタイピングを導入する前に知っておきたいこと | UXデザイン会社Standardのブログ
2014.10.29 / Prototyping, UI アプリ制作でプロトタイピングを導入する前に知っておきたいこと Ryo Yoshitake Form、Launch、Mitya、Origami、Pixate、Prott、Weld… これらが何であるか、みなさまはご存知でしょうか。 実は上に挙げたのは、ここ1年間で世に出たモバイルアプリ・Webページ用のプロトタイピングツール / サービスの名称です（まだローンチしていないものも含めればもっとあります）。 ここ2年ほどで、アプリを中心としたプロトタイピング市場は急激に拡大しており、すでに知られているメジャーなものも含めればその数は優に30を超えます。 それゆえに、プロトタイピングに興味を持ち始め、これから使ってみたいと考えている方の多くは、どのツールを使えばよいか迷っているのではないでしょうか。 しかし、プロトタイピングを行う上ではツー
IllustratorとIcoMoonでSVGスプライトのラクラク設定！
2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい！新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト！ SVGスプライトとは？ SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」に目
[Photoshop]「レイヤーをファイルに書き出し」を速くしてみた。 - Qiita
まえおき Photoshopには、全てのレイヤーを個々のファイルに書き出すための 「レイヤーをファイルに書き出し(Export Layers to Files)」というスクリプトが標準で入っているのですが、 これがめちゃくちゃ遅いため、書きなおして速くしてみました。 レイヤー25枚のpsdで使うと55秒かかっていたのが、 このスクリプトに置き換えると、3秒で終わります。 準備 以下のURLから、ExportLayersToFile.jsxをダウンロード https://raw.githubusercontent.com/kyubuns/yogurt/master/ExportLayersToFile.jsx ダウンロードしたファイルを'/Applications/Adobe Photoshop CC 2016/Presets/Scripts/'以下にいれる (Windowsは、C:\Pro
![[Photoshop]「レイヤーをファイルに書き出し」を速くしてみた。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bcc7d90888f7b87dbb1460168a4d49e8c77c288a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-1.2.2%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-1.2.2%2526w%253D840%2526h%253D380%2526txt%253D%25255BPhotoshop%25255D%2525E3%252580%25258C%2525E3%252583%2525AC%2525E3%252582%2525A4%2525E3%252583%2525A4%2525E3%252583%2525BC%2525E3%252582%252592%2525E3%252583%252595%2525E3%252582%2525A1%2525E3%252582%2525A4%2525E3%252583%2525AB%2525E3%252581%2525AB%2525E6%25259B%2525B8%2525E3%252581%25258D%2525E5%252587%2525BA%2525E3%252581%252597%2525E3%252580%25258D%2525E3%252582%252592%2525E9%252580%25259F%2525E3%252581%25258F%2525E3%252581%252597%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%2525E3%252580%252582%2526txt-color%253D%252523333%2526txt-font%253DAvenir-Black%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253D5656cfcefea2dd00148a43a8e2d83349%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-1.2.2%2526w%253D840%2526h%253D500%2526txt%253D%252540kyubuns%2526txt-color%253D%252523333%2526txt-font%253DAvenir-Black%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253D3beb5b2135acadbb8e56f9898f4d4dc5%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3D00aaf180a1d8ffc7f1c6b13d83d7681b)
Photoshop CC 2015で使えるPNGやJPGの超高速書き出し方法
PNGやJPGを超高速書き出し Photoshopは年々進化していてPhotoshop CC 2014からはアセットを抽出という機能が追加されてレイヤーを個別のファイルまたはレイヤーグループ全体をまとめて書き出すことが可能になった。 そしてPhotoshop CC 2015からはさらに便利な機能が追加された。それはクイック書き出しだ。 クイック書き出しとは その名の通り画像を即座に書き出すことができる機能。 しかし、この機能はデフォルトの設定だと画像を保存する場所を選択する画面が表示されてしまうし、ファイル形式も環境設定の書き出しから形式を1種類選択するようになっているため使い勝手が悪い。 そのため、より使いやすくするために環境設定の変更とアクションの追加が必要になる。 超高速書き出しの環境設定方法 まず環境設定の書き出しで「クイック書き出し形式」をPNGにして透明部分にチェックを入れる。
プロトタイプが閉じたデザインを切り開く : could
12月12日、名古屋にて WCAN 2015 Winter が開催されました。今年はスクリーンが 32:9 という超ワイドスクリーンがある会場でした。今までにないスライドデザインで困難なところが幾つかありましたが、良い経験をさせてもらいました。会場や観客に応じてスライドデザインは工夫していますが、その大切さを改めて痛感したイベントでした。 登壇内容も含め、イベント全体に関するレポートを参加した方々が公開しています。ぜひこちらも参考にしてください。一緒に登壇した佐藤歩さん（@ahomu）の「HTML6 でも CSS4 でもない Web 技術のゆくえ – WCAN 2015 Winter に登壇してきました」も必読です。 WCAN 2015 Winterに参加してきました – LOGzeudon WCAN 2015 Winterに参加しました – focusmark.jp WCAN 2015
それなりに使える、Web制作者がお世話になる便利ツール
作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
photoshopのアセット機能を使って爆速でスライスしよう
こんにちわ。 マークアップの田村です。 2週連続でクリエーターブログを書かせていただきます。 今回はコーダーの皆さんはぜひ使っていただきたい「photoshop2014」のアセット機能を紹介したいと思います。 アセット機能とは？ photoshopヘルプから引用させていただきます。 PSD ファイルのレイヤーまたはレイヤーグループのコンテンツから JPEG、PNG または GIF 画像アセットを生成できます。サポートされている画像形式の拡張子をレイヤー名またはレイヤーグループ名に追加すると、アセットが自動的に生成されます。また、生成される画像アセットの画質およびサイズパラメーターを指定することもできます。 PSD ファイルからの画像アセットの生成は、マルチデバイス Web デザインで特に役立ちます。 上記に記載の通り、スライスで画像を書き出すのではなく、レイヤーから画像を生成できます。 切
Photoshopパターンオーバーレイの色を編集可能な状態で変更する方法
ストライプやドットなどのパターンオーバーレイを、 任意の色に編集可能な状態で変更する方法を紹介します。 一般的には、パターンをラスタライズするか、スマートオブジェクト化してから レイヤースタイルのカラーオーバーレイで着色する方法が多いかと思いますが、 その方法では、シェイプのカタチを変更させづらいのです。 1.シェイプにレイヤースタイルでパターンを適用 シェイプを作り、シェイプの塗りを０にして、 レイヤースタイルで任意のパターンを適応します。 ※パターンは塗りと透過で出来ている必要があります。 2.シェイプをグループ化し、レイヤースタイルでカラーオーバーレイを適用 パターンを適応したシェイプをグループ化し、 そのグループにカラーオーバーレイで着色完了です！ 直接シェイプにカラーオーバーレイをすると、 パターンだけに着色されそうですが、透過にしていても 土台となるシェイプ全体に色がついてしま
webfont|test
Test up to three fonts You can choose a Google Font or a Websafe font from the list, write the exact name of a System Font or Upload a custom font file. It's a tool to test and analyze webfonts that you intend to use in your websites or projects. You can compare fonts from different sources (Google Fonts, System Fonts or any font file downloaded from internet), analyze their x-height, weights, cha
アイキャッチ画像・ロゴ作成のための6つの優秀な無料ツール / Maka-Veli .com
事情があって、プロのグラフィック・デザイナーを雇えない場合はありませんか。コストが問題であったり、時間に追われていたり…といったことが原因で。あるいは、デザインの才能はあるけれど、ITに弱いという人もいるかもしれませんね。こうしたことが身に覚えがある方には、ブログ用のシンプルな画像やウェブサイト用のロゴを簡単に速く作ることができる優秀な無料ツールがある、というのは嬉しい情報ではないかと思います。 以下の6つのツールはロガスターのおすすめです。 文字通り数分で、シンプルかつ綺麗な画像やロゴが、誰でも作れます！ 1. LiveLuvCreate LiveLuvCreateはほとんどの人が使いやすいと感じる画像作成サイトです。 LiveLuvCreateを使えば、一つの背景画像から複数画像のコラージュまで、様々な種類のデザインレイアウトから選ぶことができます。三つのテキストエリアでは沢山
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Picnic for Sketch
eky.hk
table周りで便利なスニペットやプラグイン - NxWorld
12 Best Tools for Playing Around with Color
Sign Up & Log In - Moqups App
UIってPhotoshopでどう作るの？チュートリアルで解説
レスポンシブの確認が快適に！ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス
