Webデザイン

Sketch3 機能・操作・設定一覧

Sketchを本格的に使い始める、またプラグインを作成する前にどんな機能があるのかを把握するため1から調べてみました。 おそらくAdobeからの乗り換えユーザーが多いと思うので、Adobe製品で似たような機能があればその用語を使って機能の概要を説明しようと…

素早く画像書き出しできるillustrator向けスクリプト

イラレから素早く画像を書き出すことができるスクリプトです。PNG / GIF /JPEG /SVG対応。iOSやAndroid用の画像も同時に作成できます!

illustratorでUIデザイン:スクリプトでExtension風パネルを実装

2015/9/5追記 いくつか認識違いがあったので記事を書きなおしました。 はじめに断っておきますが完全に時代遅れな内容の記事です。CCから実装できるようになったHTML5を使って作るExtensionが主流になると思いますので、これからやろうという方はそちらを調…

illustratorでUIデザイン:切り出しスクリプトの設定変更

illustratorでは画像を書き出すときにいくつかのオプションがあります。例えば、背景色を指定したり、インデックスカラーの使用色を指定できたりします。 画像切り出しスクリプトでは操作をシンプルにするためと、スクリプト上では設定した内容を覚えておく…

illustratorでUIデザイン:画像切り出しスクリプト

Illustrator上で選択したオブジェクトをPNG(24bit)/ PNG(8bit)/ GIF/ SVGの形式で一括書出しするスクリプトです。

illustratorでUIデザイン:positionとleft, topの違い

座標をいじるようなスクリプトを作成していると、たまに予測不可能な挙動をするときがあります。今まではあまり深く探ってきませんでしたが、良い機会なので調べてみることにしました。 オブジェクトの座標を示す2種類のプロパティ ある程度スクリプトをい…

illustratorでUIデザイン:スクリプトでの座標系

スクリプトを作成しているとの座標の計算が上手くいかなかったりすることが多く困ってしまうことがままあります。良い機会なので座標系について調べてみました。 ドキュメント基準/アートボード基準の座標システムの違い スクリプト上で設定できる座標系には…

illustratorでUIデザイン:画面遷移図作成スクリプト

illustratorでUIデザインをし始めると便利だなーと思うところが幾つかあります。 その内、個人的に押しなのは「アートボード」です。 1つのファイルで複数の画面を作成・管理することができ、一覧性が高いのでアプリの全体を俯瞰しつつ1つ1つの画面を作成…

illustratorでUIデザイン:属性抽出スクリプト

文字のサイズ・色やパスの線の太さ・塗りの色などを抽出してくれるスクリプトを作成しました。getProperties.zipダウンロード 基本的な使い方 要素を選択してスクリプトを実行するだけです。

illustratorでUIデザイン:スクリプトの注意点

illustratorのスクリプトについて調べていくうちに意外と引っかかりそうな困った点をいくつか見つけました。 四角形・楕円形の関数の引数はXY座標の順ではない これ最初に引っかかりました。 PathItemsにはrectangleとellipseという四角形・楕円形を描くメソ…

illustratorでUIデザイン:スクリプトことはじめ

Adobeの製品は自分で書いたプログラムを動かすことができ、バッチのように自動で大量のタスクをこなしたりすることができます。このような機能は「スクリプト」と「プラグイン」と呼ばれ、それぞれの役割は似ていても作り方や使い方が違ってきます。 今回は…

illustratorでUIデザイン:ボタン量産スクリプト

またillustrator用のスクリプトを作成してみました。タイトルそのまま、ボタンを沢山作るスクリプトです。 と言っても、ボタンの見た目まで作ってくれるのではなく、四角形のパスでボタンのワイヤーフレームを作ってくれるだけです。 UIデザインを行っている…

illustratorでUIデザイン:便利なショートカット

今回は便利なショートカット集です。 SPACE:手のひらツール V:選択ツール A:ダイレクト選択ツール Ctrl+U:スマートガイドON/OFF Ctrl+Shift+O:文字のアウトライン Ctrl + Shift + C:文字の中央揃え Ctrl + Shift + L:文字の左揃え Ctrl + Shift + R:…

llustratorでUIデザイン:縦横サイズ書出しスクリプト

縦横サイズを書出してくれるスクリプトを作成しました。縦横サイズ.jsxインストール、実行は前回の記事を参考にしてください。オブジェクトを選択してスクリプトを実行すると、縦横サイズの寸法線を描いてくれます。

llustratorでUIデザイン:相対座標書出しスクリプト

寸法っていちいち手作業で測って指示書作るのって一苦労なんですよね。Web系は指示書を自動化するツールがでてきているみたいですが、組み込み系のソフトウェアは使っている言語が違うのでそうもいきません。そこで汎用的に使えるillustratorで寸法指示する…

llustratorでUIデザイン:応用編

今回は応用編について書きたいと思います。 illustratorって結構色々できるじゃん!と思っていただけたら幸いです。 1.内側シャドウをかける。 テキストフィールドなどで内側シャドウをかけたいときがあります。Photoshopでは元々この機能を持っていますがil…

illustratorでUIデザイン:基本編

前回は設定について記事にしましたが、今回から具体的な使い方について書きたいと思います。 ただ、ボリュームが多くなりそうなので「基本編」「応用編」「ショートカット」「部品切り出し」など項目を分けたいと思います。

illustratorでUIデザイン:設定編

Fireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に…