illustratorでUIデザイン：設定編 - Two hats
Fireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。 Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に良いツールがないものか・・・と思いつつ、とりあえずまだ使えるのでFireworksを使っていました。 ですが、ディスコンになる以上別のツールを探さないといけないので、改めてPhotoshopとillustratorについて調べてみたところ、illustratorの設定を適切に行えばFireworksチックに操作できることがわかりました。 今回はillustratorでUIデザインカンプを作る際の設定について書こうと思います。Webデザインでもほぼ同じ設定で大丈夫ではないかと思っています。ちなみに自分のill
illustratorでUIデザイン：画面遷移図作成スクリプト - Two hats
illustratorでUIデザインをし始めると便利だなーと思うところが幾つかあります。 その内、個人的に押しなのは「アートボード」です。 1つのファイルで複数の画面を作成・管理することができ、一覧性が高いのでアプリの全体を俯瞰しつつ１つ１つの画面を作成していくことができます。 但し、単に画面が並べてあるだけなので画面遷移図のような並びにできたら便利だろうなと思いついてスクリプトを作成してみました。 画面遷移図.jsx Githubにもアップしてみました。github.com 使い方 例として、画面検討するためにワイヤーフレームの画面構成図をillustratorで作ったとします。 単に作っただけだと下図のように並んでいるだけです。 1.アートボードに画面遷移図用のタグをつける 「パネル>アートボード」でアートボードパネルを開き、名前にタグを埋め込んでください。タグと言っても難しいことはあ
『トレーステクニック（現代版）』
先日、モータースポーツジャパンがてらお台場に遊びに行ってきました。なんとガンダムの目の前に幻の車MID4（2型）が展示されていました。せっかく写真を撮ってきたのでトレースでもするか（←おかしい）と、久しぶりにIllustratorでトレース作業をしてみました。 Illustratorのパスの描画やハンドルの挙動は初期の頃からほとんど変わっていません。なので、トレース作業は2013年発売のCCまではペンツールとハンドルを駆使して曲線を描くのが基本でしょう。 もちろん、ツールや機能の強化により初期に比べてだいぶ楽にはなっていますが、パスそのものをコントロールする部分はやはりペンツールとハンドル操作で行います。 しかし2014年発売のCC17.1以降、ライブコーナーやセグメントの変形、アンカーポイントツール、曲線ツールや連結ツールなどパスまわりが積極的に強化され、扱いの難しかったベジェ曲線を比較
s.h's page - [Illustrator] JavaScript scripts
MITライセンス(※)のフリーウェアです。 ※ 要約すると、改変再配布ほぼ自由、保証なし、ということです。 その他の雑多なスクリプト、スクリプトの更新情報、プラグイン版、エクステンション版については、はてな とか 英語版ブログ を見てください。Github にもあります。 2018.07.20 選択オブジェクトを処理するスクリプトで、選択したグループ内のロック/不可視オブジェクトを処理から除外するようにしました。 2017.05.13 「円弧にする」通常のパスと同様にテキストパスを補正する機能を追加しました。 2017.03.12 「適当に連結」設定した距離以上に離れたアンカーポイントは連結しないようにできるオプションを追加しました。 2016.11.26 「メタボール」「メタボール（円弧）」「角を丸くするplus」で win.enabled を変更する箇所に try ... finall
秘かに流行『ポリゴンスタイル』の制作方法 〜 illustrator 〜
今年は出来るだけ不必要なものは削り、必要最低限の情報でデザインを表現する「ミニマリスム」なデザインが主流でしたね。 そんな中、写真やオブジェクトなど様々なもので「フラットデザイン」とまではいかないものの、同じ意思を次いだデザイン方法『ポリゴンスタイル』が秘かに流行を見せていました。 こんにちわ、レジットの小沢です。 １.画像を用意する まずは、ポリゴンスタイルに置き換えたい画像を用意しましょう。 今回使用する写真はコチラです。 前回の記事でご紹介した2014年の流行色【ラディアントオーキッド】色を少し意識しました。 ２.パスで囲んでいく 『１.画像を用意する』で用意した素材をイラストレーターで開きます。 早速『ペンツール』でブロック調に区切って行きましょう。 まずは人物から！！ この際注意する点は以下の点です。 ・囲む線は直線で、しっかりアンカーポイントで繋ぐ。 ・目や鼻等の形を表現す
簡単！Illustratorとtriangulatorを使ったクールなポリゴンイラストの作り方 | designek
今年もありがたいことにいろんなお客さんから年賀状のデザイン依頼をいただきました。とあるお客さんのロゴがポリゴンっぽいテイストのデザインだったもので、ロゴに合わせて年賀状もポリゴン風にデザインしてみたんですが、それがけっこうかっこよく仕上がったんで短時間で簡単にポリゴン風イラストを作る方法をご紹介します。 step1.まずはポリゴンイラストのもとになる写真選び 提供元：Railstation.net 今回はこの鶴の写真をポリゴン化してみます。 使うのは左下にいるこの鶴。まずはPhotoshopで余計な部分をカットして、使いやすい大きさにリサイズします。 Photoshopで100%表示した時に、だいたいお使いのパソコンの画面サイズにすっぽり収まるぐらいがポリゴンにする時の使いやすい大きさです。 ざっくり切り抜いてた方がポリゴン作りやすいかも もし背景がごっちゃごっちゃしてたり、ポリゴンに
これからのWebデザインはIllustrator派が増えてくるのでは？ | 5 LOG
個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。 これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。 ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。 なぜIllustratorか？ そもそもイラレの方がレイアウトが組みやすい。 これが一番の理由なんですが。。。 いや、これ以外にも、いろいろとあって、 以前は、とにかく画像画像だったパーツ（ナビゲーションとかボタンとか見出しとか）が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。 さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる
Web制作に必ず役立つIllustratorのチュートリアルやスライドのまとめ
ひと昔前までは「IllustratorはDTP」といった感じでしたが、Illustratorのバージョンアップによる機能強化に伴い、徐々にイラレでWeb制作をおこなう人が増えてきました。 ベクターっぽいスタイルのフラット、ベクターデータのSVGなどの影響もあるかもしれません。 Illustratorを使って、Web制作をする時に役立つ環境などの設定方法や注意点をはじめ、レイアウトやエレメントの作り方、スライスの便利技、時短テクニックなどのチュートリアルやスライドを紹介します。Illustratorで一番ネックとなる「にじみ」の理由とその解決方法も勉強になります。 Speed Design with Illustrator 翻訳版：Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ ウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テク
Illustrator CC（17.1）アップデート概要（1）ライブコーナーと鉛筆ツールの改良、カスタムツールパネル｜DTP Transit
ダイレクト選択ツールでアンカーポイントを選択すると、パスの内側に新しいUIパーツ「コーナーウィジェット」が表示されます。これをドラッグして角丸を設定することができます。 特定のアンカーポイントを選択しているときにはそのアンカーポイントのみ、特定のアンカーポイントを選択していないときには、すべてのアンカーポイントが対象になります。
Webデザインのタネ | 未経験からWebデザイナーを目指した私が、Web制作のスキルアップのためのTipsをお届けします
Web制作の現場では、日々新しいデザインのインスピレーションを得るためにギャラリーサイトを活用しています。しかし、数多くあるギャラリーサイトの中から、自分の目的に合った適切なサイトを見つけ出すのは意外と難しいものです。 この記事では、複数の...
IllustratorだってWEBできるんです！！！ - Toro_Unit
これからIllustratorを始めてみようという人のための基本操作とかいろいろ | WEBデザインレシピ Webデザイン。イラレは出来る子。フォトショなんかに負けないもん。 | Memento Mac Illustratorでピクセル単位の作業を奇麗に行うための方法（イラレのピクセルずれ問題） – Memento Mac そうなんです。Illustratorはできる子なんです。もともとDTPからデザインに関わりだしたと言うのもあるのですが、そんなわけでIllustrator派です。WEB屋じゃ邪道だとか、Photoshopだろ常識的に考えて・・・とか色々言われていますが・・・ 普通に使おうとすると単位はミリメートルだし、0.123pxとかわけわからん単位になるかもしれません。色もCMYKかもしれません。 ただ、ヤツはできる子なんです。みんなヤツのことを誤解しているだけなんです。話してみた
Illustrator ABC
Illustrator って、難しい？ Illustratorは奥が深くて、なかなかマスターできない……。そういうふうに捉えられてしまう原因には、なんとなく心当たりがあります。それは、Illustratorの機能が持つ「多面性」です。 Illustratorのブラシ機能を例にとってみましょう。この機能には、大きく分けて「モチーフを複製して散りばめる」「モチーフを複製して並べる」「モチーフを変形する」「線に抑揚をつける」の4つの性質があります。名前から察するに、せいぜい絵筆代わりに使うようなものだと思っていたら、大幅に裏切られる結果となるでしょう。そのうえ、このブラシ機能を利用するには、［ブラシツール］でドラッグする、［線］に設定する、の2種類の方法があり、目的に応じてちゃんと使い分ける必要があるのです。 たとえば額縁のようなフレームをつくるなら、「モチーフを複製して並べる」タイプを選択し、
Illustratorの文字組みアキ量設定について - なんでやねんDTP・新館
最近更新が滞っていたので、twitter上で以下のように宣言した。 【予告】今週中に Illustratorの「文字組みアキ量設定」に関しての記事にてブログを更新するつもり…動画を中心にデフォルトの四つの違い、マズイ点、優先度、カスタマイズのポイント等々…私の理解の範囲で解説しようと…こうとでも宣言しておかんとなかなかブログが更新でけへんのでね…— なんでやねんDTP/おぢんさん (@works014) 2013年4月9日 ということで、あまり解説されることのない、Adobe Illustratorの「文字組みアキ量設定」について、そのデフォルト設定から、カスタマイズまで全般的に説明するための動画を作成し、YouTubeで公開し始めた。 Illustratorを起動して、実際に（同じように）やってみるのが理解への早道でござる ●デフォルトの文字組みアキ量設定の4種 Illustratorに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://creative-tweet.net/blog/2012/10/10-illustrator-tips-201210.html
http://illustrator-ok.com/
Design Tips
使い方・活用法 - スライスより便利！画像アセット機能でWeb用にパーツを保存する | Adobe Creative Station
https://503dg.jp/mojigumi-nyu-mon/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
