Sketchのシンボル活用で新規サービスの開発効率が2倍になった｜北川レオ / hicard
先日、SNSを使ってカンタンに募集することができるbosyuというサービスをリリースしました。 bosyuのデザインを作っていく中で、sketchのシンボルを活用してみたのですが、とても効率よく作業を進めていくことができました。Basecampに入った当初、ほとんどシンボルが使えていなかった頃に比べると開発効率が2倍ほどになったと思います。 あくまでも僕流なので、「自分はこうしてるよ。」っていうアドバイスを募集します！！！(bosyuリンクを記事の最後に貼っておくのでぜひ応募お願いします！) 命名規則はAtomic Designを参考する僕は基本的にAtomic Designと言われる考え方をベースにシンボルを作っています。Atomic Designって何やねんって方はこちらの記事がわかりやすいので、ぜひ読んでみてください。 カンタンに言うと、デザインを小さい順からAtoms(原子)、Mo
10 annoying issues in Sketch and 9 easy solutions for them
I am a big Sketch fan since I moved from Adobe Photoshop. We designers love it, seriously! But … sometimes this app is driving me nuts. So what is wrong there? List of issues:Half pixels (For example width: 271.01).With “cmd + v” Sketch inserts objects to a random position on the artboard.Sketch works slowly and drive is running out of space.Mess within an artboard panel.Selecting of objects is pa
Sketch App Sources - New Free Design Resources - Icons, UI/UX Kits, Wireframes, iOS, Android Templates for Sketch
Thousands of UI/UX resources from great and resourceful designers around the world Sharing and building on each other's work is the ultimate form of learning and retaining knowledge. Since 2012, we're curating some of the best resources to help you design, prototype, and collaborate better and faster. UI Kits Apps Icons Illustrations Wireframes Ideas Web iOS Material Data Forms Mockups Real Annota
【保存版】ワイヤーフレームに使えそうなSketch UIキット30選 | DesignSource
どうも、yohicです。 先日フリーのPSDをご紹介したんですが、そういえば最近Sketchばかり使ってるなあと思いまして。。。 最初はワイヤー描くときだけ使ってたんですが、だんだんデザインもこっちを使うようになってしまいましたね。 結局画像の加工するのでphotoshopが無いと全部はできないのですが、半分以上はSketchで完了してしまうのではないかなと。 どちらにしてもphotoshop使うなら、Sketchいらないじゃないという議論もあったのですが、そこはまた別の機会に書いてみたいと思います。 今回はワイヤーフレームを描くときに使えそうなUIキットを30個選んでみました！ スポンサーリンク webサイトのワイヤーフレーム まずはWebサイトのワイヤーフレームで使えそうなUIキットを10個ほど選んでみました。 01: Atomic Design Template Sketch Res
Sketch.appで画像や写真にマスクやグラデーションマスクをかける | Recost Design
画像や写真の切り抜きによく使うマスク(Mask) PhotoshopやIllustratorを使ったことがある人にとってお馴染みのツールですが、使い方がPhotoshopやIllustratorに慣れているとちょっとややこしい。 普通にマスクをかけたつもりが他のオブジェクトが消えてしまったり、マスクをかけた画像がいつの間にか違うところに移動してしまったり。。 マスクはSketch上でデザインを作るのに重要な機能です。 ここではマスクのかけ方から、その注意点などについて詳しく解説していきます。 マスクの基本 まずは基本のマスクのかけ方です。 1，画像を配置 まずはマスクをかける画像を配置します。 2，シェイプを配置 次にマスクの形となる図形(シェイプ)を配置します。 3，画像とシェイプを選択 シェイプを選択した状態で[Layer → Use as Mask]を選択します ※ショートカットはc
Sketch3でパターンを簡単に作る方法 - ゆんこブログ
Facebookの「Sketch Japan」でシェアされてたのでメモ。 Sketchのパターン作成は パターン素材を作る PNGとかで保存 塗りつぶしでPNGを選択する という感じで、一度パターン素材を保存する必要がありました。 でもこれだとパターン素材を編集したい時に、毎回PNGを保存しなくてはならないのでとても面倒くさい。 で、 パターン作成が少し楽になる方法。 1.パターン素材を作ってコピー。 2.パターンを敷くオブジェクトを選択し、「Fill」→「Pattern Fill（しましまのアイコン）」を選択 ３.赤い丸の部分をクリックして、ペースト パターン素材を編集したら毎回コピペする必要がありますが、パターン素材をいちいち保存するよりはかなり楽です。 ありがとうございましたありがとうございましたmm
無駄な作業時間を節約！Sketchの便利なショートカットまとめ
こんにちは。Sketch大好き・デザイン大好きのデザイナーです。 みなさんは、デザインしていて「もうこんな時間・・」「時間足りない・・」と思ったことはありませんか？ 作業を効率化すれば時間をぐっと短縮することができます。 今日は毎日デザインをしているあなたにSketchのショートカットキーをご紹介したいと思います。 Sketchの初心者の方もそうでない方も、是非見てみてください。 （そもそも「Sketchってなんぞ」という方は「Sketchでデザインをして気付いたPhotoshopより優れているポイント」と合わせてお読みください。） ワークスペース表示 まずはSketchのウィンドウ全体（レイヤーリストとインスペクタとワークスペース）にまつわるのショートカットキーのご紹介です。 アートボード追加 レイヤーリスト表示・非表示 インスペクタ表示非表示 レイヤーリスト・インスペクタ表示非表示 プ
Sketchで少しだけ迷ったこと - Qiita
はじめに Illustratorや、Fireworksでは簡単にできていたけど、 Sketchだとどうやるんだろう？と悩んだ機能についてメモしていきます。 文字をアウトライン化する アウトラインをかけたい文字を選択し、 ツールバーの「Type」から「Convert Text to Outlines」を選択する。 文字がアウトライン化される。 塗でグラデーションを設定する 塗でグラデーションを設定する場合はまずインスペクターメニュー（右側のプロパティ設定とかするところ）から「Fill」を選択。 表示されるメニューの中から、「Linear Gradient」を選択。 放射状のグラデーションがかけたい場合は「Radial Gradient」 円錐を描くようなグラデーションの場合は「Angular Gradient」 「Linear Gradient」を選択することで、グラデーション設定用のメニュ
Sketchの使い方: 初心者がマスターしておきたいSketchでのデザイン作業がぐっと効率的になるチップス | コリス
10 Sketch Tricks for Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レイヤー間でスタイルをコピペ レイヤーの移動 カラーピッカー 角丸の半径を個別に設定 再利用できるシンボル ツールバーのカスタマイズ iOSデバイスでデザインレビュー Sketchの便利なプラグイン Sketchでプレゼンテーション iPhone, iPadの画面を録画 レイヤー間でスタイルをコピペ レイヤーに同じデザインをコピペしたい時は、カラーコードなどをコピペするのではなく、スタイルをレイヤー間でコピペできます。 レイヤー間でスタイルをコピー ⌘ + Option + C レイヤー間でスタイルをペースト ⌘ + Option + V レイヤーの移動 レイヤーを上下に移動させたい時は、ドラッグ&ドロップの代わりにキーボード
Misocaの新しい受発注機能がSketchでデザインされてる様子 - 弥生開発者ブログ
こんにちは、こくぼ @yusuke_kokubo です。株式会社ファントムタイプ @PhantomType から来ました。 ちょっと前の話ですが、宮城県の松島に行ってきました。ちょうど紅葉がきれいな季節でした。 写真は朝日を浴びる福浦橋です。 今回はMisocaの受発注機能がどのようにつくられているのか、という話をしたいと思います。 Misocaの受発注機能とは 皆さんMisocaと言えば「請求書を簡単に作れて取引先に送るところまでやってくれるサービス」というイメージが強いではないでしょうか？ 受発注機能ではそれに加えて、取引先とのコミュニケーションもサポートしています。 Misocaが掲げる「仕組みで世の中をシンプルにする」「事業者間の取引を最適化する」といったビジョン・ミッションを推進するための野心的な取り組みです。 受発注機能のスクリーンショット 例えば、取引先に見積書を送ったとしま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sketch で写真をデュオトーンにする方法 ｜ SiTest (サイテスト) ブログ
is-there-a-quicker-way-to-collapse-art-boards-in-sketch-app
Sketch App Tip: How to Collapse Artboards and Groups
g.o.a.t - 縦書き可能なブログサービス