「ウェブ時代のデザイナーのための文字組入門 」に参加してきました - デザイナーのイラストノート
JUSO Coworkingで10/4に行われた「ウェブ時代のデザイナーのための文字組入門 」に参加してきました。講師はなんでやねんDTPで有名な大石さん。最近パンフレットなど印刷物をご依頼いただく機会も増え、本を買って読むもののなかなか疑問を解消できないわたしにはぴったりの勉強会でした。今回の記事はIllustratorで印刷物のデータを作る、という前提です。 そもそも文字組・文字詰めは何のため webデザインでは、デバイステキストを自由に詰めたり組んだりすることがむつかしいため、文字組・文字詰めと聞くと「なんか難しそう」と構えてしまいがちです。 私たちがよく使うフォントというのは、四角い箱の中でデザインされています。しかし日本語のように「ひらがな」「カタカナ」「漢字」と様々な文字の形があると、当然小さい形、大きい形が出てきます。また、約物と言われる「」や（）や・などは、隣り合うと何だか
【パス初心者向け】トレースするときに気をつけていること - デザイナーのイラストノート
SVGの普及かアイコンブームか、パスを使ってイラストを描く方が増えた気がします。前から書いてみたかった、パスでトレースするときに気をつけるといい「作り方」と「考え方」を記事にしてみました。 文字をトレースしてみよう パストレースの練習として、文字やロゴマークをトレースすると言うのはよく聞きます。曲線あり直線有り中抜きあり、で練習にはいい素材です。特にフォントの場合はアウトラインをとることで、どこにアンカーポイントを置けばいいのか参考にすることが出来ます。 試しにこの2つのお題に取り組んでみました。この形を実現するのにどんな方法をとりますか？正解はいくつもありますが、例えばこの方法。 完成！いいじゃない！と思いますか？確かに形としては完璧なんですが、練習であれば個人的にはこちらをおすすめしたいです。 さっきとの違いが分かるでしょうか？3つの図形を組み合わせて文字の形を作っています。文字を書く
LINEスタンプづくりにFireworksをおすすめする理由 - デザイナーのイラストノート
2月26日にLINEのオリジナルスタンプをだれでも制作できると言う話が発表されました。「LINE Creators Market」イラストであることが必須、png形式、スタンプだけで40個…これは…なんというFireworks向き案件！ということで今回はその理由を。 まずは概要 LINEスタンプのガイドラインによると、必要なものは メイン画像(1個) 240×240px スタンプ画像(40個) 370×320px(最大) トークルームタブ画像(1個) 96×74px 上記の画像計42個で、形式は全てPNGです。スタンプ、トークルームタブ画像は性質上背景透過になると思います。 イラストをどのアプリケーションで制作するかというのは個人の好みの問題なのですが、Fireworksで作る場合にはぜひ「ステート」機能を使うことをおすすめします。 ステートとは Fireworks CS4以前は「フレーム
Photoshopでベジガールメイキング - デザイナーのイラストノート
Backlessさんが企画されている、みんなでかわいい女の子を描くイベント「JPGirl」に参加させていただいたので、お恥ずかしながらメイキングを。 参加したイラスト 今回のテーマは「ベジガール」（野菜の擬人化）でした。まずはどんな絵にしよう、モチーフは何にしよう、そこから考えます。 しかし、JPGirlのページを見ていただけたらわかるかと思いますが皆さん個性的ですごくお上手です。ここで私の黒い心がにゅっと出てきまして「まともに戦ったら…痛い目見るでぇ…」ということになり、また、時間も無いことから、他の方が描かないようなラフなテイストで行くことにしました。 それでいいのか！って？いいんです！！与えられた時間、モチーフで良い感じに見せようと思ったら早い段階での何かを諦めるのは大切なことです。 モチーフかぶりはまあ仕方ないので、冬らしく「かぼちゃとはくさい」でいくことにしました。硬いものとふわ
ニュアンスのあるグラデーションをつくる - デザイナーのイラストノート
今回はツールのTipsではなく、グラデーションをつくるときに私がいつも心がけていることなどをご紹介します。グラフィックソフトだけでなく、cssでグラデーションをつくるときにも使えるポイントだと思うので、非デザイナーの方にも見ていただけるように簡単に、すぐ読める内容になっています。 修正）2013/8/29/14:41 画像の2〜4枚目を修正しました。明度と彩度について間違いがありました、申し訳ありません。 ニュアンスのあるグラデーションとは 例えばこのカラーをサイトのベースカラーに使いたいとします。モニタの色というのは「R(赤)G(緑)B(青)」の0〜255で出来ていますが、他に「色相、彩度、明度」という数値でも表すことが出来ます。今回はこの3つの数値も重要なので、心の隅に置いておいてください。 メニューバーやボタンでグラデーションを作りたい、白背景に馴染むように白で作りたい、というときは
Illustratorのアピアランスで忍法！ - デザイナーのイラストノート
前回、イラスト応用編で使用したIllustratorの「アピアランス」機能。これが結構面白いので、折角なので忍者風でご紹介したいと思います。 忍者登場 用意したのは忍者のイラスト。後ろの文字や手書き線は後付けの効果線で、アピアランスとは関係ありません。あしからず。 では、まず。忍法！分身の術！ 「アピアランス」→「変形」で横にコピーしていきます。本当のオブジェクトは左のひとつだけです。 設定はこんな感じです。左のひとつだけが選択されています、これが本体です。設定の右下に「コピー：5」とあります。これで横に5つ分身させています。 はっ！敵からの攻撃！ヒラリ、ヒラリっと。 これは「ワープ」で形を変形させています。 選択されているパスの形を見ると、実際のパスは変形していないのがわかります。こんな風に擬似的に見た目を変えてくれるのが忍法アピアランスです。さきほどの「変形」に「ぼかし(放射状)」を組
みんな大好き水着美女で「影」と「光」を描いてみよう - デザイナーのイラストノート
今回は「影」と「光」のお話です。私たちが目にしている立体物には「奥行き」がありますが、平面のイラストでそれを表現するとき「影」と「光」の表現は必要不可欠です。イラストだけでなく、デザインに取り入れることで奥行きのある世界観などを表現できるようになります。 影を描く練習 まずは基本の球体を描いてみましょう。円形を描いてみてください。 …え？描かない？ 球体なんてつまらないから描かない？ わかりました。それではみなさんが大好きな球体でご説明することにしましょう。 え？全然球体じゃないじゃないかって？そうです、今はまだ貧乳…いや、スレンダーな女性ですね。これから影と光を追加して、グラマラスな女性にしていきたいと思います。 影のつき方について、ざっくり説明すると球体にはこのような形で影ができます。手前にせり出してくる部分を避けて丸く影がついていき、光が下に反射する場合は「照り返し」の光があると球体
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーのイラストノート - イラストや参考にしたサイトのご紹介、アプリケーションの技術向上を目指すブログです。