Sketchでアイコンを簡単に描く Part.1｜sawa / note inc.
この記事はSketch Advent Calendar 2017 5日目の記事です。 - こんにちは、デザイナーの沢登（@sawamemo） です。 私はデザインする際にSketchを使う事が多いのですが、以前はSketchの独特なパス操作が苦手でアイコンなどはイラレで作成し、Sketchに移す。というフローでカバーしていました。 しかし、実際のところアイコン程度のシンプルな形状であれば、複雑なパス操作やアンカー操作を行わずとも作成出来ます。（ということに気づいたのが2年ほど前） また、デザイナーによってもアイコンの作り方もまちまちで、自分の作り方をアウトプットしてみたら、別の作り方も見えてくるのでは？と思い記事を書いています。他にも良い作り方があれば教えて頂けると嬉しいですね🙏 前提今回作成したアイコンは8つで、主にアプリなどやWebサービスでよく使われる（よく作っている）物をピックア
TimeCrowdのロゴができるまで | TimeCrowd Blog
ミヒャエル・エンデの「時間」に関する物語「モモ」を読んで 「ロゴを亀にしたい」 と思ったら実現した話を共有させてください。 TimeCrowdとは チームとの時間を手軽に共有して チームの生産性を上げるためのツールです。 リアルタイムで誰がどのタスクをやっているのかわかるし 過去ログが溜まってレポートになるので週次振り返りミーテングの時に 「今週は40時間の稼働の中で17時間は◯◯をしていた」 みたいなことが見える化されて、 「そんなに大変ならそのタスク諦めてこのタスク優先しよう」 「それってこうすればもっと楽にできるよ」 「次に他の人がそれと同じような事する場合どうしたらいいと思う？」 みたいな会話ができて有意義。 自分達としては もはやTimeCrowd無しで仕事することなんて考えられないレベル。 「この気持ちどうやって伝えたらいいんだろう」 と考えていた中で出会ったのが前述の「モモ」
こんな僕でもおしゃれなiOSアプリを閃く！インスピレーションを掻き立てるアプリデザインの参考サイト集1！ - Qiita
こんな僕でもおしゃれなiOSアプリを閃く！インスピレーションを掻き立てるアプリデザインの参考サイト集1！Objective-CiPhoneAndroidXcodeiOS by @mixiappwchr iOS開発において、UI/UXは最重要ポイントといっても、過言ではありません。 とは言っても、こればっかりはセンスをもちあわせてないと難しいですが、センスのよい人たちから学ぶことで、インスピレーションが鍛えられると思います そこで参考になるサイト群を探してみました。 アイコン類 iOSpirations http://www.iospirations.com/ こちらはアプリのアイコンやそれだけでなくランディングページのギャラリーもあります。 iOS7 After iOS 7 Icons http://afterios7icon.tumblr.com/ こちらはiOS７になりアイコンがどうな
Susan Kare Limited Edition Prints. Signed & Numbered. Kare Prints
Each flag is a hand-painted (acrylic paint on a black canvas flag with grommets) re-creation of the flag that flew over Bandley 3, the Macintosh building at Apple, Inc. in 1983. Susan Kare painted the original in response to one of Steve Jobs' slogans at a Macintosh offsite: “It’s better to be a pirate than join the Navy.” Need a perfect gift for the geek, colleague, loved one, or Mac aficionado i
1,000通り以上の組み合わせが可能なフェイスアイコン「Avatars and Emoticons Vector Set」
アイコンで表現されることも多い人の顔のビジュアル。同じテイストで何種類も描き出すのはとても大変な作業になってしまいます。そんなシーンに是非利用したい、1,000通り以上の組み合わせが可能なフェイスアイコン「Avatars and Emoticons Vector Set」を今回は紹介したいと思います。 いろいろな表情や髪型のフェイスアイコンが簡単に作り出せるパーツがセットになった、とても便利なフリー素材です。 詳しくは以下 セットになっているのは、帽子やメガネなどの装飾パーツ、目・口・鼻の多彩な表情が楽しめるバリエーションパーツ、女性・男性のいろんな髪型パーツ、フェイスラインパーツ。好きなものを選び重ねていくことで、人のフェイスアイコンが完成します。ユニークなデザインのパーツが多く、楽しみながらフェイス作りを楽しむことができそうです。 他にはあまりない貴重な素材だと思いますので、オリジナル
Ligature Symbols
HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami
SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る
SVG によるアイコンデータと CSS による背景色の指定を組み合わせてサイズやカラーを自在に変更可能なアイコンボタンを作るお話。あわせて主要 Web サービスのロゴデータを SVG で用意する方法や注意点なども。 透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG （Scalable Vector Graphics） でやることでサイズ変更にも対応しやすいやつを作るっていうお話。 手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 （スマートフォン表示だと隠れてると思いますが） にある 「Follow」 メニュー部分で使ったので紹介。 やってることは簡単です。白抜きにしたい部分をそのまま白色、背景は透過するよ
WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
Google Visual Assets Guidelines - Part 1 - Behance
Google’s brand is shaped in many ways; one of which is through maintaining the visual coherence of our visual assets. In January 2012, expanding on the new iconography style started by Creative Lab, we began creating this solid, yet flexible, set of guidelines that have been helping Google’s designers and vendors to produce high quality work that helps strengthen Google’s identity.
Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方
TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。（現在のデザインになってからだいぶ経っており、今更な感じですが…）その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字（現在地表示） アイコンと文字（通常表示） ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねｗ それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook（アプリ） ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出
SVG filterを使って全てのページをゲームボーイ風にするGreasemonkey - 聴く耳を持たない(片方しか)
ゲームミュージックと生存確認をかねた画期的な: svgのfilterを使ってドット階調っぽい効果をつける がかっこよかったので、アレンジしてこんなGreasemonkeyを作ってみました。 全てのウェブサイトをゲームボーイ風にするGreasemonkey インストールはこちらから http://userscripts.org/scripts/show/138971 このGreasemonkeyをインストールすると、画面左上にこうしたアイコンが表示されます。 それをクリックすると、閲覧しているウェブサイトがゲームボーイのようなドット絵風の画面になります。 アイコンをもう一度クリックすると元に戻ります。 利用上の注意点 普通のGreasemonkeyはGoogle Chromeなどでも使えるのですが、これはCSSでSVG filterを利用しているので2012年7月現在 Firefoxのみ対応
Ligature Icon フォントセットの自作方法とWebFont - くらげだらけ
去年の10月に「iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】」というタイトルのエントリーで、Web Symbols TypefaceというWebFontを使って、タイプフェイスでアイコンを表示する方法について紹介しました。それ以来、似たようなFontが作成され公開されていますが、つい最近知ったsymbolsetというサイトで紹介しているsymbol fontには感心しました。 それまでのSymbol Icon Webfontには、それを使用する際の表現としてあまり適切でない部分がありました。アルファベットの「t」などに直接アイコンを割り当てていたため、code上では意味を成さない（コンピュータに理解できない）文字が並ぶことになってしまいました。そのため私が使用するときは、HTMLでは意味のあるの文字列（Twitterなど）を記し、CS
CCライセンスで配布されている8ビット風のカメラアイコン集 | IDEA*IDEA
こちらもメモ的にエントリーしておこうかな。各種カメラのアイコン集ですよ。8ビット風で良い味出しています。 ↑ epsやらAI、PNGで配布されています。 ライセンスはCCなので使いやすいですな。サイト上部のカテゴリーメニューをクリックしたときの動きも素敵です。 » The Camera Collection
iotacons
▼ 2017 (18) ▼ November (2) Goodbye, Jim Nabors. Goodbye, Charles Manson ► October (1) ► September (2) ► August (1) ► June (3) ► May (1) ► April (1) ► March (3) ► January (4) ► 2016 (18) ► December (1) ► November (1) ► August (2) ► June (1) ► April (1) ► February (5) ► January (7) ► 2015 (42) ► November (5) ► October (2) ► September (3) ► August (2) ► July (3) ► June (5) ► May (1) ► April (2) ► Mar
はてなココのカテゴリーアイコンをデザイン素材として公開 - tikeda's blog
はてなココのカテゴリーアイコンが全てできた（計62個）ので、無料で使えるデザイン素材ということでCCライセンスにて公開しました。先日オープンした、Hatena Developer Centerのはてなココのページからダウンロードできます。ダウンロード、ライセンス詳細については以下のページでお願いします。 はてなココスポット API 第1版 - Hatena Developer Center 「カテゴリー情報取得」という項目内です データ自体はイラストレーター形式（ai,eps,png）ですし、パスの数も少なくベーシックな機能だけ使っています。その分ちょっと安易などころもありますが、カスタマイズしやすいデータになっていると思います。例えばサイズの拡大やモノクロ2階調に変更など都合に合わせて改変して頂いてかまいませんし。もちろん、はてなココAPIを使ったサービスはもちろんそれ以外のデザイン素材
STUDIO SHIN Homepage
SimpleDotX version 2.1.2 動作環境：Mac OS X 10.4以降 シンプルながら、インデックスカラー画像のパレットやダイレクトカラー画像のアルファチャンネルが編集できるドットエディターです。 ■更新威歴 ・透過GIFを読み込んだときに、透過指定のピクセルにノイズが混じるのを修正。 SimpleDot version 1.0.3 動作環境：Mac OS X 10.1以降 ※Mac OS X 10.3 で使われる方はこちらをDownloadしてください。（最新Verとは仕様が若干異なります） SimpleDot version 1.0.3 動作環境：Mac OS 8.6～Mac OS 9.2.2 / Mac OS X 10.1～ ※Mac OS 9で使われる方はこちらをDownloadしてください。（最新Verとは仕様が若干異なります）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
25 Delightful Hand Drawn Icon Sets – Bashooka
「ハッピーマック・アイコン」デザイナーの作品集
IDEA * IDEA
IDEA * IDEA
