![https://creative-tweet.net/blog/2014/12/sketch-3-advent-calendar-2014-25.html](https://cdn-ak-scissors.b.st-hatena.com/image/square/46049a8aaa98f27c77ab3e01d55c2063ea75ee62/height=288;version=1;width=512/https%3A%2F%2Fcreative-tweet.net%2Fassets%2Fimg%2Fsite-ogp.png)
Sketch3は、ウェブサイトや、アイコンや、スマホデザインや、レスポンシブデザインなどのデジタルデザインに特化したデザインアプリです。 直感的で、定義をすればするほど速くデザインができるんですが、PsやFwと比べると、シンプルになりすぎてて「あの機能はどこなの?っていうかあるの?」って思うものがいくつかあったので、まとめてみたいとおもいます。
[Mac App] Pixel Winch – UIデザインに便利なソフトウェア定規 Pocket Tweet ヤバいこれ超便利。スクリーンショットから、各UIパーツ間のスペースを測れるソフトウェア定規。Mac用のベータ版となります(製品版では有料化されるのかも)。立ち上げるとメニューバー右端に常駐し、そこからスクリーンショットをまずは撮影します。撮影するとディスプレイ全面を使って大きく拡大表示されるので、画面左上に出てくる各種ツールを使ってUIパーツ間の距離を測る事ができます。中でも特に便利なのが「Grapple Tool」。これを使うと画像内のコントラストを判断し、パーツとパーツの間の距離をセミオートで測ってくれます。いやこれめっちゃ便利です。UIデザインする人にとっては常用アプリになりそう。Webデザインでも使える機会が多そうです。 Pixel Winch
末尾に追記していますが、モリパス(MORISAWA PASSPORT)など、たくさんの書体をインストールされる方には不向きです。 フォント管理はFontExplorer X Pro一択オシなのですが、有料でそれなりにすることもあり、検証に検証を重ね、Font Book.app編(OS X Mavericks)を作成してみました。 フォント管理2013(10.8対応、FontExplorer X Pro編) パレートの法則よろしくインストールされているフォントの中で使うものは一握りです。デフォルトの状態では、OSやAdobe CS/CCなどでインストールされるフォントがすべて表示されるため、フォントメニューには使用しないフォントがたくさん表示されます。 IllustratorやMac OSを再起動せずに、フォントメニューに表示するフォントをコントロールできるように環境を整備する方法をご紹介し
Don’t Just Design – Make It Real Imagine your designs feel like the final product: shiny, responsive and fully interactive. All done in one tool. Download for macOS „Antetype lets me try out ideas fast and iterate even faster. Refining a design from a loose idea to a polished prototype is what Antetype’s widgets are made for.“ Brendan Donohoe, Design Manager
最近は、コワーキングスペース タネマキ の方で、記事を更新しています。@uetsuhara でも気になったニュースや記事など流してます。良かったら覗いてみてください。 読了目安 3分19秒 また一年ぶりの更新ですが、先日 iPhone アプリ「らくらく人狼」ってのをリリースしたので、宣伝がてら記事を書いてみました。 僕自身は、初めての iPhone アプリ制作で、右も左も分からなかった(実際には右と左くらいは分かります。)ので色々調べつつやりました。その中で「うおー便利だなぁ。」と思ったツールを紹介してゆきたいと思います。基本的には、Mac と iPhone 前提でのツールになります。 今回のらくらく人狼アプリは、タネマキメンバーのイカさんと一緒に制作しました。イカさんがプログラムで、ぼくがデザインとかその辺でした。 Skala View これはとても便利でした。Photoshop の画像
Photoshopでデザインカンプを作成して、いざコーディング!となると面倒くさいのが画像のスライス作業。 その画像のスライスを超絶楽にしてくれるツール「Slicy」を今さらながら導入しましたので使い方をご紹介。 レイヤー・グループに名前を付けて保存 アプリはMac App StoreでDLでも良し、公式サイトから体験版をダウンロードするも良し。 試しにこんなカンプを作成してみました。世界中のイケメンを紹介する、IKEMEN.comです。第一回目のモデルから頓挫しております。 データができましたら、切り出したいパーツのレイヤーorグループに名前(○○.jpgや○○.png)を付けて保存します。 あとはその保存したPSDデータをSlicyにぶち込むだけ。 見事、名前を付けた通りに画像がスライスされました:) あとはドラッグアンドドロップか、画像を選択して上のSaveボタンをクリックして任意の
みなさんはお仕事をされているときに、どのようなツールを用いて作業をしているでしょうか。 何かいいものがないかと探している方、まず何を使ったらいいのかわからないという方など、様々な方がいるかと思います。 先日Goodpatchのメンバーページ(⇒ABOUT)ができたので、今回は、Goodpatchのデザイナーに仕事でどのようなツールやアプリを使っているのか、またなぜ使っているかという理由を聞いてみました。 これらがみなさんの参考になれば嬉しいです! UIデザイナー(小林幸弘さん) コバさんは、新しいツールやサービスが出たときにはとりあえず新規登録してみて、インタラクションであったり、見た目であったりを確認するようにしているそうです。その中でUIが細かいところまで考えられているものや、個人的に好きな見た目だったら使い続けるのだとか。 4コマノート、Notepod アプリ、スマートフォンサイトの
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 (参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう(前編), (後編)) プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
日本時間29日の夜まで限定で、$499分、日本円で約50,000円分の有料のウェブ用の素材やフォント計471種類が無料でダウンロードできるので、紹介します。 ※為替の変動が激しいので、これを書いている現在$499は48,432円です。 使い道が限定されたような素材なんでしょ?と思う人もいるかもしれませんが、いやいやこれがなかなかの素材が揃っていました。 素材の提供元は、下記のサイトやクリエイティブ集団です。 素材の提供元 当ブログでも紹介したことのあるDesignModo, sitepoint, vandelayなども含まれています。 ダウンロードしたので素材をキャプチャで紹介する、、、前に、ダウンロード方法から紹介します。 素材のダウンロード ダウンロードは、下記サイトにアクセスします。
こんなエントリーは去年末か年明けに書いておけ!って思いますが、blogを書く練習としてまとめます。 これから列挙するツールを使う事により、去年は手を動かす事の楽しさを再確認。 いままでダルかった作業が楽になるだけではなく、HTMLをキレイに書けたり構造を考えるようになったりと一石二鳥。 SASS and Compass 全俺が感動し、咽び泣くほど無くてはならない存在となったHtmlコーディングの革命児。 なぜすぐに導入しなかったのかと過去の自分に言いたいぐらい! いまさら解説はいらないと思いますので、お世話になったサイトをご紹介いたします。 CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 Sprite画像でもう悩まない?!SassとCompassで速攻Sprite画像を作る方法に感動! | バンクーバーのうぇぶ屋 CompassでCSSスプライト[to-R] C
2015年1月16日 フォント, 便利ツール 久しぶりにブックマークしているサイトを整理しました。という事でお掃除後の恒例行事?私がブックマークしているフォント・Webフォント・テキスト関連のWebサイトを、中の人へ感謝の気持ちも込めてシェアします!何年もお世話になっているサイトばかりですが、ここ最近はWebフォント関連のサイトが増えてきましたね。いいな!と思えるサイトがあれば嬉しいです。 ↑私が10年以上利用している会計ソフト! フォント関連 フォントhack.jp フォントhack.jp 日本語の無料フォントの表示確認ができるサイト。複数のフォントを表示して比較することもできます。 dafont dafont 英字の無料フォントを大量に集めたサイト。大量すぎて眺めてたらいつも物凄く時間がたってますw ライセンスは各自要確認。 フォントガレージ フォントガレージ 日本語フォントの販売サイ
Louis Vuitton Dashboard 前回はiOSのデザインアイコンを特集したが、今回はMac版。MacのアプリアイコンはiOSのように四角くする必要がないため、バラエティに富んでいて楽しい。どれも作り込みが半端じゃない。 Artist Bag LilyView Archy Rocketter Wunderlist brainzap iPhoto CrowdCafé Little Snitch Louis Vuitton Photo camera Cart Machine Mac Pro Finder Word Apple I My Stuff Preview Padlock Gibson Les Paul これらはDribbbleにアップされたアイコン。Dribbbleは気に入ったデザイナーに仕事を依頼する事もできる。前回のiOSの時はDavidが良かったが、今回はLouis
もう世間は秋なんですかね…。 物欲が止まらない今日この頃なんですが…たぶん秋のせいに違いないと思っています…( ꒪⌓꒪) iPhone があろうとも iPad があろうとも、やっぱり MacBook Air が手放せないでいる私でありまして、どうしてもその ケース やら バッグ やら次々と目移りしていくのであります。 これもやっぱり秋の空…。(しつこい…。) というわけで、再び気になる MacBook Air の ケース と バッグ を集めてみました。 今まで購入したものなども入れてあるので、これから選ばれる方もぜひご参考に…一緒に考えましょう…((((;゚Д゚)))))))ガクガクブルブル 1. BookBook for MacBook Air まずは、以前にもご紹介した事があるこのケース。 これは可愛いと思います。BookBook の中で一番『本』らしいんじゃないだろうか!(/
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く