地味に便利！ダミー画像をSVGで生成するスクリプト、ローカルでもオンライン環境でも利用できる -holder.js
ダミー画像を作成するのは面倒ですよね。ローカル環境でもオンライン環境でもダミー画像を簡単に生成できる軽量スクリプトを紹介します。 画像を用意する必要はありません。 簡単なコードで、SVGのダミー画像を利用できます。サイズ・カラーは自由にカスタマイズでき、文字入力やダミー画像用のクロス線にも対応しています。 さらに、レスポンシブ用の流体ダミー画像も生成できる優れものです！ holder.js holder.js -GitHub holder.jsの特徴 holder.jsのデモ holder.jsの使い方 holder.jsの特徴 holder.jsはダミー画像をクライアントサイドで生成するスクリプトです。ローカル環境でもオンライン環境でも利用できます。サイズ・カラー・フォントのカスタマイズにも対応しており、ダミー画像はSVGもしくはCanvasで生成されます。 MITライセンスで、個人でも
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく、単体で動作します。 Bounds.js -GitHub Bounds.jsの特徴 Bounds.jsのデモ Bounds.jsの使い方 Bounds.jsの特徴 画像の遅延読み込み、無限スクロールなどの実装には、境界を設定することが重要です。通常は、イベントハンドラ、ループ、getBoundingClientRectの呼び出しの組み合わせが必要でしたが、これらはメインスレッドで実行されるため、パフォーマンスが低下します。Bounds.jsは要素と境界の交差を非同期に検出し、パフォ
もう手放せない！Illustratorスクリプトを使ったデザインスピードアップ術！
みなさん、Illustratorのスクリプトって使っていますか？ 社内のデザイナーに聞いたところ、日常的に使っている人は9人中1人！そもそも存在さえ知らないよ、なんて人もいます。おいおい(；・∀・) 使わないともったいないぜ！！・・・と思いつつ、ぼくも使っていませんでしたｗ ということで使っていない人からすると、なかなか敷居が高いIllustratorスクリプト。実際の使い方・導入方法、どんな場面で使うといいのか？などなどまとめてみました。 この機会にぼくといっしょに始めてみませんか？ そもそもどんな時にIllustratorスクリプトを使うの？ Illustratorで作業する際、キーボードショートカットやアクションを使って効率化・スピードアップをしていると思います。スクリプトはその延長と考えてもいいと思います。 少しでも早く作業をするため、単純作業を減らすため、よく使う作業を自動化する
#Illustrator でアートボードを作り、そして書き出す
Illustrator と小数値 Illustrator にはアートボードという、作業する上でとても重要な機能があります。 印刷物の場合だったら印刷領域として、ウェブやアプリケーションならデバイス画面領域として作業・管理できる機能です。アートボードは１つのドキュメント内に複数持つこともできるし、それぞれのサイズを自由に変えることもできます。A4サイズとA1サイズのポスターだったり、PC用やタブレット用、スマホ用の各画面をまとめて１つのドキュメントで管理することができます。 アートボードは、Illustrator で作業するときの「基準となる枠組み」です。何をするにもアートボードをベースに構築・管理していくことで作業がスムーズになります。 1. アートボードを作る アートボードを作る方法はいくつかありますが、メジャーどころは以下の３つです。 新規ドキュメントダイアログで指定する方法 新規ドキ
#Illustrator と小数と私
Illustrator は印刷物で使う「ミリ」や「インチ」を使用するイメージが強いと思いますが、ウェブデザインやアプリケーションデザインなど、ディスプレイで表示することが目的のデザインを行う場合、一般的に「ピクセル」という単位をベースに作業を行います。この「ピクセル」をベースにした作業で一番重要なポイントが「数値の小数」です。今回は、Illustrator のピクセル単位で作業するときに発生する小数について、レベルにあわせてまとめてみます。（以下、Illustrator CC 2014 で検証した結果です。） Illustrator と小数値 入門編 小数が入るとどうなるの まず、100px × 100px の矩形を描いてみます。この矩形の座標を小数にし、100%表示してみましょう。 座標に小数が入っている矩形 このように、端に意図しないアンチエイリアス（疑似的になめらかにみせるためのボケ
角丸の作成・修正の強力な武器になる機能拡張 -Corner Editor | コリス
Corner Editor Corner Editorの主な特徴 Corner Editorのインストール Corner Editorの使い方 Corner Editorの主な特徴 旧版の全ての機能が使え、更に多くの機能を備えています。 直線で作成された角に角丸作成・修正ができます。 角を一つだけでも、複数同時でも、複数別でも簡単に角丸を適用できます。 角の種類は角丸だけでなく、計4種類のスタイルに増えました。 多角形にも対応しました。 一度設定した内容をセーブできるようになりました。 パスがスムースになりました。 各コーナーにラベルを付与できるようになりました。 Corner Editorのインストール インストールは簡単です。 ※Win/Mac共通です。 ダウンロードして解凍した「Corner Editor.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
