タグ

ブックマーク / in.spicagraph.com (5)

  • わたしのデザインセオリー(写真マスク編) - デザイナーのイラストノート

    この記事は「Webデザインセオリー Advent Calendar 2015」の11日目の記事です。@striveさんの「Webデザインの価値と効率を上げるため意識していること Webデザインセオリー Advent Calendar 2015」というとても戦略的でいい記事から一点、小手先の話ですみません・・・! デザインに写真を使うときにわたしがよくしていること 「デザインセオリー」というと「これをやればデザインはOK!」みたいに聞こえますが、もちろんそんなことはなく、自分が画像をトリミングしたりマスクするとき、イメージや印象を伝えるために、どんな手法をよく使うかということを実例を交えながらご紹介します。 グラデーションマスクにこだわってみる メインイメージなどで、写真の上にメッセージを重ねるのはよくある手法ですね。例えばこの緑をバックにした女性の写真を使用して、上に文字を重ねましょう。

    わたしのデザインセオリー(写真マスク編) - デザイナーのイラストノート
  • 【パス初心者向け】トレースするときに気をつけていること - デザイナーのイラストノート

    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以前は「フレーム

    LINEスタンプづくりにFireworksをおすすめする理由 - デザイナーのイラストノート
  • Fireworksのイラストで色変更を簡単にするためにしていること - デザイナーのイラストノート

    Fireworksでイラスト制作をするメリットとして、変更が容易だということがあります。それは形だけでなく、色を簡単に変更するのにも便利な機能が有るんです。イラストもデザインも、作りながら微妙に色を変更したい場面がありますよね。小さな事ですが、そういうときのためにしている工夫をご紹介します。 イラストは影や明るい部分など微妙な色の差で出来ている 2月なのでバレンタインイラスト描いてみました。少しテクスチャをかけていますが、それ以外は基の塗りと線でできています。右側に、各パーツを構成している色を抜き出してみました。それぞれ基の色と、影の明度が低い色、ハイライトの明度が高い色で構成されています。 「明度」しか変わらないなら…全部同じ色で良いんじゃない?ということで、私はこういうイラストの場合、各パーツを同じ色で作って「フィルター」の「明度・彩度」で影やハイライトを作っています。 面倒だから

    Fireworksのイラストで色変更を簡単にするためにしていること - デザイナーのイラストノート
  • Fireworksのイラストをマスクで仕上げる(小ネタつき) - デザイナーのイラストノート

    前回はFireworksで塗りのテクスチャやパターンを使用しましたが今回は最後にマスクでちょっとひと手間かけた感じに仕上げていきたいと思います。記事の最後に、イラスト作成によく使う小ネタ2つ付きです。 Fireworksのマスクは単純で、組み合わせいろいろ Fireworksのマスクはすごくわかりやすくて、これもFireworksが好きな理由のひとつです。グループ化したパスでもマスクできるので、写真の切り抜きで、シャープなところをボケたところが混在する写真なんかすごく便利です。 今回はこんな感じで、単調になりがちな、ただの「塗り」で構成されたイラストをテクスチャでマスクして質感をプラスします。 イラストを描く 前回と同じく、「木炭画」→「滑らか」のモクモクした線でイラストを描きます。塗りは普通です。 マスクを作る 描けたら、模様を入れたいところだけグループ化します。顔にテクスチャを入れると

    Fireworksのイラストをマスクで仕上げる(小ネタつき) - デザイナーのイラストノート
    ddt2000
    ddt2000 2012/12/17
  • 1