Home > Archive of デザイン

デザイン

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

アートブラシで描いたような手書き風文字をイラストレーターで表現するチュートリアル

blog1_20160718190941f41.jpg

アートブラシや筆ペンで描く今風のカリグラフィーをイラレでずっと描きたいと思っていまして。イラレの線幅ツール(CC3以降?)である程度表現することが出来そうなので、手順を書いてみます。

※たぶん中〜上級者向け。ある程度イラレがわかる人じゃないとついてこれないかもです。

Read More

Illustratorでつくるシンプルですこし複雑なカタチは分割で考える

path_blog.png

Adobe Illustratorで、シンプルだけどすこしだけ複雑な形をつくる考え方です。
基本は、縦や横に割って、繰り返すということだけ。楽しいですよー。
実際の作業をアニメーションgifにしてみましたので、感じを掴んでいただければ嬉しいです。

Read More

スマホアプリのUIデザインを研究するときに便利なフリーのSketchデータいろいろ

klm-boarding-pass-delaram.jpg

スマホアプリのUIを研究したいときに便利なフリーSketchファイルを紹介します。
空間の扱いなど、勉強になるところがきっとあるはず。

Read More

PhotoshopとIllustratorとSketchを上手に使っていこう

psaisketch.png

PhotoshopとIllustratorとSketchが最近のウェブデザインツールとして上がってますね。
お客様のニーズに合わせて、いつもはデザインしないアプリをベースアプリとして
デザインを要求されることもあるかとおもいます。
今回は、「だいたい同じことができる、でも得意不得意はあるかも」といったことをアプリをまたいで考えてみました。

Read More

ウェブデザインの文章レイアウト組みパターンを展開してみる

layout_title.png

ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。

Read More

愛され♡「メリハリ」ウェブデザインを作る!注目を集めたいときのデザインテクニック




デザインの本質とはちょっと違うのですが、ウェブデザイナーに必要な技術のひとつ、広告などに使う「目立つ・理解されやすいウェブデザイン」の手法をまとめてみました。
メリハリをつけて、目に留めてもらえるようなデザインを目指しましょう!

(すみません、タイトルふざけました、中身はいつもどおりマジメです。)

Read More

photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。

psartboard_02.jpg

photoshopのアートボード機能を使えば、
sketchみたいにカンプを複数並べてデザインができます。
レスポンシブデザインはもちろんですが、PC/スマホサイトの各カンプをデザインしたり複数サイズのバナーパターンを同時に編集したりと結構使えたので、ご紹介。

※アートボード機能は、Adobe Photoshop CC 2015 から利用できます。

Read More

レスポンシブデザインのプレビューをするために、ブラウザの最小幅を知っておこう

all_20150910213948669.jpg

レスポンシブでぐりぐり動かしたいときに、ブラウザの最小幅って実はすごく大事で。最小幅がスマホ幅より広いと(というか、0 > スマホ最小幅 > ブラウザの最小幅になったとき)、納品前に二度手間になることも・・!
もちろん各幅をエミュレーターで確認するのも大事なのですが、中間の動きも見られるのがレスポンシブなのですよね。調べたところブラウザのバージョンによってサイズが前後してるみたいですので、現時点で私の環境で主要ブラウザの状況を調べました。

Read More

要素をタイル状に並べる軽量プラグイン「Freetile.js」

freetile.jpg

タイル状に要素を並べるので有名なのは、「Masonry」が有名ですが、もっと手軽に、軽くしたい!って時は Freetile.js がよさげです。

Read More

最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント

emmet.jpg

Emmet(旧 zen coding)を、できるだけ覚えずに入門するための、考え方を紹介します。
zen codingのときに私は一回挫折というか、面倒だなとおもって放置していた方で
なんで面倒と思ったかというと、速さに気を取られて一文で(何行ものHTMLを一発で=爆速を再現するため)長い呪文のような命令文をみて「あーだめだ」って思ったんですよね。

そのあたりも踏まえて、爆速にはならないかもしれないけど、短い文で面倒なコーディングを少しだけ楽にする基本を書いてみたいとおもいます。


Read More

Index of all entries

Home > デザイン Archive

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。