サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
こんにちは。SONICJAMデザイナーの森田です。 みなさま、dribbble というサイトをご存知でしょうか。 dribbble とはデザイナー向けのSNSコミュニティです。 招待制なので作品を公開できるデザイナーは限られており、作品は一定のクオリティが担保されています。（ちなみにbが３つあるのは『ドメインが取れないから』という理由だそう。） 主にデジタル領域に強いデザイナーがUI 画面やイラスト作品をあげていて、リアルなスキューモフのアイコンを製作していた時代の名残からか、特にイラスト作品は図形を元に簡潔に描かれたジオメトリックなテイストのものが多い傾向にあります。本日はそんな dribbble 風のイラストの描き方。描く上での考え方をご紹介します。 通常の "ペンツールでパスをトレースして..." といった描き方ではなく、シェイプツールを元に無駄なく形を整えるという発想の描き方で
こんにちは。システムインテグレーション部の松田です。 皆さま、仕事にプライベートにと多忙に多忙を極めていらっしゃるかと思いますが、 ご自身のスケジュールをどのように管理されていますでしょうか？ カレンダーやタスク管理などスケジュール関連のアプリをスマホに入れて 管理されている方も多いと思いますが、今回は『Trello』をご紹介させて頂きます。 Trelloって？ Trello(https://trello.com/)とは、FogCreek Software 社提供のタスク管理ツールです。PCではWebサービスとしてブラウザから利用しますが、iPhone やAndroid アプリも提供されていて何処に居ても利用することができます。 ちなみにFogCreek Software 社の設立者は、 ソフトウェア開発チームの質を採点する“ジョエルテスト”で知られているJoel Spolsky
Here’s some tips forcreating icons — anything from a single colour pictogram to a highly detailed app icon. There’s quite a few details my app designworkflow article doesn’t cover, specifically relating to icon design. Icons are often where design software is pushed, making full use of vector abilities, masking, and constructivesolid geometry.It is for those reasons that icons often require di
ちょっとしたイラストが描けたらなぁ。なんて思うこと多いですが、デジタルならではの方法で簡単に描く方法が公開されていたので、簡単ですが訳したいと思います。詳細はオリジナル記事であるHow to Draw Cute Thingsを御覧ください。 最初に好きなネコとかハムスターとかナマケモノなどの動物の画像を用意する。基本的に何でも良いけど、慣れるまではモフモフ系がやりやすいみたい。トカゲとか蛇はむずい。 選んだ動物を円の集合にする 円じゃなく三角や四角を使ってもよい。動物をシンプルにする工程。画像ソフトのシェイプから選んでね。 できた形の輪郭を描く 必要のない線を消す。余裕あったら脇の下を細めたり足の重なりを上手に書いたりしてみる。 全体のバランスを変形してかわいくする 頭大きくしたり、胴体縮めたり、太らせたりしてかわいくする。ここはセンス。 可愛さは目に宿る 目が一番大事。サンプルを参考に。
今月の初めにLigature Iconフォントセットの自作方法とWebFontというエントリーを書きました。これはsymbolsetというサイトにinspireされて、Ligature機能を使ったSymbol Web Fontを自作しようという試みを書いたものです。しかし、この時はsymbolsetで実現されているようなものには及ばない不完全なものになってしまいました。 その後、いろいろと調べたり試したりする中でsymbolset相当のWebFontを自作することが出来ました。今回はそのプロセスと技術的解説について紹介したいと思います。 Ligature Symbols について まずは今回自作したWeb Fontのデモページをご覧ください。 【DEMO】 Ligature Symbols 今回作成したLigature Symbols FontはOFLライセンスで公開しており、ダウンロー
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogleChromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - shareJavaScript,HTML5 andCSS アイコンを作成するだけだと、あまり新鮮さはありませんが、CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつけるフォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
思わず、これ無料なの？！というくらいの充実した内容、そして美しいレイアウトで構成されたウェブデザインのテクニックが学べるeBookを紹介します。 ウェブデザイナーをはじめ、ディレクター・アートディレクターなどウェブデザインに携わる全ての人に役立つと思います。 iBookにも対応 内容は、簡単に言うとノンデザイナーズブック（Amazonで見る）のウェブに特化した感じで、完璧な精度のピクセルにどのようにデザインするかがテーマになっています。 ページ数は全部で165ページ、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の内容になっています。 テキストは英語ですが、各ページキャプチャ付きなので、デザインの知識が多少あれ
海外の有名デザインブログ「Blog.Sppon Graphics」でIllustratorのチュートリアルビデオを紹介したエントリー「30 Illustrator Video Tutorials Every Designer Should See」がありましたのでご紹介します。 新しいアプリケーションを習得しようとしている場合、様々なメニューやツールを通して、その道のエキスパートがガイドしてくれるものほど良いものはありません。この記事は最も詳しく解説された30のAdobe Illsutratorのビデオチュートリアルとスクリーンキャストを集めた記事です。それぞれの特徴を生かした明快な解説と役立つテクニックは、あなたのIllsutratorのプロへの道の手助けとなるでしょう。 Digital Inking Demonstration & Tutorial How To Setup and D
ベジェ曲線が慣れてきたけど、「アンカーが多い」「時間がかかる」。 春なので、そんな人の為の記事を書いてみました。 ベジェ曲線の基本 ベジェ曲線の基本は、@WebDesignRecipeさんが分かりやすい記事を書いて下さっています。 おさらいで読んでおいた方がいいかもしれません。 Illustrator（Photoshop） のペンツールできれいなパス、ベジェ曲線を描くためのコツ（私流） ハンドルとアンカーと曲線の関係 一般的に、アンカーをなるべく減らせば、いい曲線ができると言われています。 しかし私は、ハンドルをうまく扱えることで、いい曲線ができると思っています。 不要に思えるところでもアンカーは必要ですし、減らしすぎはよくありません。 円を３つ書いてみました。 次のアンカーとハンドルは以下のようになっています。 アンカーが2点でもハンドルを調整するれば、円を描くことができます。 ただし正
5月20日に刊行された書籍『プロが教えるデジカメ撮影テクニック』（著者はプロカメラマンの三浦健司氏）。コンパクトデジカメを使って上手な写真を撮るにはどうすればよいのか、ネットショップオーナーやブロガー向けに書籍の内容を紹介します。
画像をアイコンの形に（icns書類）に作るアプリケーション。 入手法 iMacに付属しているCDからDvelopper Tools をインストールする。 Icon Composerのみのインストールはできないので、パッケージ全部をインストールした。ただし、このパッケージは全部で2.44GBもあるので、HDに余裕のある人と、のちに不要なものをアンインストールできるスキル持ち以外は、ちょっと落ち着いて考えよう。 アンインストールは、ターミナルを開いてスクリプトを打ち込む必要があります。 実際のところ、わたくし、ターミナルを開いて五秒で閉じました。訳わかりません。 ターミナルもXcodeも一生使わない自信あり。 ふん、2.44GBくらいアイコンのために捧げてやる～（笑
Every graphic designer will end up, at some point, with a client who needs an icon designed.Going into the project, your first idea would be to use your experience, training andcreativity and dive straight into the project gung-ho. In some occasions, doing this could be disastrous. Ideally, you should learn the basic principles of icon design first, the importance and functions of icons on web s
全2回でお届けしている「Adobe Dreamweaver CS4」の新機能紹介と操作ガイド。前編では、「コードナビゲータで定義したCSSをすばやく調べる」、「ビューの表示方法を切り替える」を紹介した。後編では、「Spryデータセットでコンテンツ作成」と「ライブビュー/ライブコード」で表示を確認する方法を紹介したい。 Spryデータセットでコンテンツ作成(1) 「Spryデータセット」は、取得したデータをソートしたり、指定したデータを呼び出して表示するSpryコンテンツだ。「Dreamweaver CS3」から搭載された機能だが、CS4から読み込み用データとしてHTMLのテーブルを扱えるようになり、コンテンツ作成がより容易になった。「Spryデータセット」を使って、日付をクリックすると記事が更新されるコンテンツを作成してみよう。 日付を変えるとコンテンツが更新される。写真は完成後のイメージ
2008年11月にリリースされたWebオーサリングソフト「Dreamweaver」の新バージョン、「Adobe Dreamweaver CS4」。Dreamweaverを完全マスターするためにも、CS4から加わった新機能「コードナビゲータ」や「ビューの切り替え」、「Photoshopとの連携」、「Spryデータセット」、「ライブビュー/ライブコード」の具体的な操作方法を前編、後編の2回にわけて紹介しよう。 「コードナビゲータ」で定義したCSSをすばやく調べる 「コードナビゲータ」は、選択した場所に適用されているCSSの内容を確認する機能。ショートカットキーでコードナビゲータを開くには、「Alt」キー(Win)または「Command」＋「Option」キー(Mac)を押しながら、ドキュメントの任意の場所をクリックすると、グレーの太枠に囲まれたウィンドウが開く。これがコードナビゲータである。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
