illustratorでUIデザイン：設定編 - Two hats
Fireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。 Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に良いツールがないものか・・・と思いつつ、とりあえずまだ使えるのでFireworksを使っていました。 ですが、ディスコンになる以上別のツールを探さないといけないので、改めてPhotoshopとillustratorについて調べてみたところ、illustratorの設定を適切に行えばFireworksチックに操作できることがわかりました。 今回はillustratorでUIデザインカンプを作る際の設定について書こうと思います。Webデザインでもほぼ同じ設定で大丈夫ではないかと思っています。ちなみに自分のill
DTP→Webデザイナー転向時に、これやったら捗ったよリスト13
元々DTPやってました 自分は大卒でとある広告メディア系の会社に入ったんですが、ずっとDTP（エディトリアルデザイナー）の仕事をしており、正式にWebデザイナーに転向したのは2012年頃の話です。 「このまま紙だけやっててもそのうち食えなくなっちゃうよなあ…」と思い、仕事のかたわらHTML/CSSをはじめとしたWebの勉強を始めました。一応HTMLかじったことはあるものの、知識は大学生の頃で完全にストップしており、floatって何？レベル。（テーブルレイアウト世代） 一念発起したはいいものの、いざ勉強をしようとすると色々と問題が生じるわけですね。 Photoshopでデザインなんてやったことない、Illustrator使いたい 呪文みたいなコードを延々と打つ作業がだるい うまく動かなくて一つのコード間違いで3時間潰れたりするのが辛い 本屋行けば技術書、入門書はいくらでもあるけど、逆に何選べ
継ぎ目のない背景画像を作成するPhotoshopのチュートリアル | コリス
Photoshop初心者でも簡単に作成できる、ウェブページの背景に利用する継ぎ目のないシームレスな画像を作成するチュートリアルをDesign Shackから紹介します。 Create Seamless Web Background Textures in Minutes 写真の「ぼけ」のようなエフェクトをオリジナルで描き、その画像を元に継ぎ目のないシームレスな画像にします。 下記は、各ポイントを意訳したものです。 Step 1: 新規作成 Photoshopを起動して[ファイル]-[新規]を選択し、ファイルを新規作成します。 設定は、幅：800px、高さ：800px、解像度：72pixel/inch、カラーモード：RGBカラーにします。 新規作成の設定画面 次に、カンバスを「#80ac4b」で塗ります。 [Ctrl]+[A]でカンバスのすべてを選択し、カラーピッカーに「#80ac4b」を指
「Webサイトの配色で困った！」→「HUE/360使えば良いじゃない」
Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
Tips_イラレでもズレませんブレません – イラレラボ illustrator-labo
こんなエントリをみつけました↓ ＞Illustrator WEB用に保存するとサイズがずれる どうもイラレ系の制作TIPSを見ているとこのテの「イラレから書き出すとズレる」の記述があるんですががが。 結論から言えばズレません。 ズレるのはそのオブジェクトの座標がズレているからです。ピクセルにぴったりあわせてオブジェクトを作ればズレないんですヨ！マジでマジで！ 最初っからズレないようにデータをつくれば、イチイチPhotoshopに書き出してからスライスとかしち面倒くさい事しなくて済みます。元ファイルが複数あるとミスの元ですし、できればイラレで作ったら元ファイルはイラレで完結しておきたいところなのです。 スライスもイラレ上で長方形を使ってズレる事なくキレイに切れますからね。 キモは前にも描きましたが。定規とトリムマークと数値入力です。それとピクセルプレビュー。 手順としては 1. 新規書類を開
イラレでWebデザインをされる方にお願いしたい7つのこと。
普段はDTPをメインにやっていて、たまにWebのデザインもするというデザイナーさんは、 IllustratorでWeb用のデザインカンプを作ることが多いと思います。 別にIllustratorからでもコーディングはできるのですが、後工程の人を困らせないために、 ちょっとだけ気に留めておいて欲しいことがあります。 １．色モードはRGBで。 普段DTPをやっているとついCMYKモードのままで作ってしまうことがあるかもしれません。 でもWebはRGBの世界です。変換すると意図した色にならなかったりしますので、 最初からRGBで作ってください。埋め込む画像も同じです。 ２．どこがデバイスフォントなのか分かるように指示を。 紙の世界では文字は文字でしかありませんが、Webの世界では「テキストデータ」にするのか 「画像」にするのか決めなければなりません。本文は原則「テキストデータ」ですが、 判断に困る
プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode
原点回帰ということで、たまにはビジュアルデザインのことでも書いてみます。 僕が思うに、プロとアマのデザイン力の決定的な違いは細部の詰めだと感じるわけです。 もちろん、ごく基本的なレイアウトだったり、配色だったりといったデザイン力の向上が何より大事だし、そこさえクリアすれば、ユーザーに対して最低限のおもてなしはできると言っていいです。 ただし、他のモノとは何かが違うより優れたデザインを作り上げるためには、普通のユーザーは気にも止めないようなほんの些細なところに対する気遣いが必要になってきます。 まさに「神は細部に宿る」というやつです。細部を突き詰め出すとキリがなかったりしますが、ここに気づけるかどうかが一流のデザイナーとそうでない人の別れ目のひとつなんじゃないでしょうか。 見た目で揃える
Color Hex Color Codes
Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selected color. Html element samples are also shown below the color detail page. Simply type the 6 digit color code in the box above and hit enter.
Web Color よく使われる 96色
Web Color の中でもよく使われると思われる96色の表です それぞれの色のリンク先で背景色にして確認できます 04080120160200 240
いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！
HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から
| ＾＾ |秒刊SUNDAY | 鼻血が出るほど高センスなWEBデザインサイトギャラリー集まとめ
2009年06月08日 鼻血が出るほど高センスなWEBデザインサイトギャラリー集まとめ カテゴリ：WEBデザイン デザインサイト集というのは、こんなにも沢山出来上がっているとは知らなかったのですが、仕事柄かなり活用しますのでここで抑えておきたいと思います。 ◆いけてるサイト.com このサイトを紹介しないと、この記事のコンセプトがわからないので、とりあえずフリということで。 ■WEBデザイン リンク集 : ikesai.com --- いけてるサイト ドットコム（WEBデザインの参考にどうぞ） ◆Webデザイン・Webデザイナーのまとめサイト 膨大なデータベースです。色やキーワードで検索できる。ここにいけばほぼそろうか？ ■Webデザイン・Webデザイナーのまとめサイト | Webデザインに優れたサイトのリンク集 ≪デザインリンクデータベース≫ ◆WEBデザイン・データベースWEBdeDB
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mr.doob