「Sketch」の記事一覧creive(クリーブ)の「Sketch」についての投稿一覧です。
Sketchで大活躍のショートカット集｜ikutani41
僕は『Sketch』をUIデザインツールとして業務利用しています。 Sketchにはたくさんのショートカットが用意されていますが、「とりあえず実務上はこのあたりさえ使っておけばUIデザイン業務はそこそこ作業スピード出せるよ」というものをまとめました。 図形の挿入 左上から選択・・ とかやってると遅いです。キーボードで一文字打つだけですし、これは覚えましょう。 もし忘れてしまった時も、Insertメニューにヒントが表示されています ・四角形：R（Rectangle） ・円形：O（Oval） ・線：L（Line）※角丸四角形（U）は、普通に四角形を置いたあと corner-radius 指定すればいいので覚えなくてもいいかと。 ガイドの表示・非表示 ・ガイドの表示・非表示：Ctrl + Rこれさえ覚えておけば一瞬で表示を切り替えられます。1日に何回もこの操作をやることになるでしょう。 グループ
Sketch公式のUI Kit「Elements」を解剖してみる | よりデザイン
今やUIデザインの定番となったSketchの使い方や便利なプラグインについてhttps://www.sketchapp.com/Facebookグループ「Sketch Japan」もぜひ。https://www.facebook.com/groups/1403075229952941/ 公式のサンプルデータということで、これを紐解くことによりSketchを作っている会社がSketchをどのように使っているのかの一端が見えてくるのではと思い、中身を覗いてみることにしました。 全体像 DLした.sketchファイルを開くとApps Pageに各テーマの画面が並んでいます。 解像度のベースはiPhone Xです。5種類のテーマ x 7画面 = 35画面が並んでおり、ある程度のシチュエーションに耐えられるように作られたことが伺えます。 それでは手始めに最上段の「Food」アプリのレイヤー構造を眺め
Sketch でテキストの色を管理する方法 | mediba Creator × Engineer Blog
フロントエンドエンジニアの金森です。 最近、企画→デザイン→開発というワークフローを最適化したくて Sketch を本格的に使い始めました。 端的にシンボル最高ですよね。 何が最高かってシンボルの上書き（Nested Overrides）ができるところです。 こんな感じにテキストや画像、アイコンだけでなく形や色まで上書けてしまうなんて😍 アイコンや形の塗りだけでなく、テキストの色も管理できないかと思ったことはないでしょうか。 この記事では試行錯誤してたどり着いた3つの方法について、いいところや悪いところと合わせて紹介します。 方法1: Blending を使う テキストに使いたい色をシンボルにします 色とテキスト（文字色は黒 #000）を同じ大きさで重ねたシンボルを作ります色はテキストより上のレイヤーに配置し Blending: Screen に設定します最下層に白い背景を敷きますこうす
[動画解説付き]デザイナーがUI実装時に伝えるべき5つのSketchTips！ 〜エンジニアの困っている声に応えました〜 | Nagisaのすゝめ
2017年10月11日 [動画解説付き]デザイナーがUI実装時に伝えるべき5つのSketchTips！ 〜エンジニアの困っている声に応えました〜 Sketchで困っているコトがないかエンジニアに向けた社内アンケートを実施 こんにちわ、デザイナーリーダーの川畑です。 現在NagisaのUIデザイン開発では主にデザイナーがSketchで制作し、エンジニアが参照しながら実装しています。 今回は更なるエンジニア-デザイナー間の効率良い伝達のために、Sketchを参照する上でエンジニアが困っていることをヒアリング→デザイナーチーム全員で解決策を回答したので、記事として公開したいと思います。 Sketchの基本的な操作や機能は理解しているが、もっとうまく使いこなしたいデザイナーやエンジニアの参考になれば幸いです。 こちらの困っている声に応えました Lineheightが設定されたテキストボックスのマー
![[動画解説付き]デザイナーがUI実装時に伝えるべき5つのSketchTips！ 〜エンジニアの困っている声に応えました〜 | Nagisaのすゝめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eda78adee654e21c638755de408942da82a74b9b/height=288;version=1;width=512/https%3A%2F%2Fblog.nagisa-inc.jp%2Fwp-content%2Fuploads%2F2017%2F10%2Fsketchtips-1-1024x512.png)
日本語にもしっかり対応してる！PhotoshopのPSDファイルをSketchファイルに変換する -PSD to Sketch
ツールを移行する時にネックになるのが、既存のファイルです。 Photoshopで作成したPSDファイルをSketchファイルに変換するオンラインサービスを紹介します。レイヤー、シェイプ、スマートオブジェクト、マスクなどにも対応しており、PSDで作成したファイルがSketchで利用できるようになります。 日本語フォントや日本語のレイヤー・ファイル名でも問題なく、またかなりのファイルサイズでも問題なく利用できました。 PSD to Sketch Design Converter PSD to Sketchでは、PSD上のさまざまなエフェクト・機能をそのままSketchファイルに変換できます。 シェイプ レイヤー 結合されたレイヤー グループ化されたレイヤー テキスト レイヤー ビットマップ レイヤー スマート オブジェクト グラデーション 調整レイヤー ガイド マスク レイヤー スタイル 詳し
Sketch移行とUIコンポーネント化で、良いことしかなかった話
アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
UIを制作するベストなアプリ、とばかりに普及したSketch。最近はHTMLコーディングに役立つSketch Pluginも増えてきました。 本日は、デザイナー視線ではなく、コーダーやプログラマー的な立場からみた、コーディングを10倍早くするSketch Pluginを紹介します。 はじめに紹介するのは、「Make Exportable」というプラグインです。画像の「Export」を爆速にするプラグインです。 Retina Displayのような高解像度ディスプレイも今や当たり前になり、画像を利用するときにも@1xや@2xなど、1つのレイヤーから複数種類の画像形式のファイルやサイズの書き出しをするのが当たり前になりました。 しかし、Sketchでは、そのような作業を行うときに欠点があります。複数の種類の画像形式のファイルやサイズの指定を一つ一つおこなうにはかなり面倒です。 そのような時に「
SketchでAuto Layoutを考慮したデザインが作成できるプラグインが便利すぎる - NSBlogger
Auto Layout問題 iOSアプリを作成する際、なにかしらの方法でデザインをデザイナーから共有してもらうことがあります。 画像ファイルでもらったり、Sketchファイルでもらったり。 一部ではデザイナーがStoryboardを直接修正することも。 Amazing workflow of UI design: "Zeplin"でデザイナーとエンジニアの連携をより簡単に!! iOS編 #iosdc 2016 A-7 デザイナーにStoryboardをお任せする技術 - niwatakoのはてなブログ フリルのiOSアプリ開発におけるエンジニアとデザイナーの作業分担について - inFablic デザイナーとのやりとりで一番ネックとなるのが画面サイズが変わったときのデザインです。 iPhone 7の大きさをベースとしたデザインを1枚いただいたとしても、どこを可変にしてどこを固定にするか曖昧
デザインのバージョン管理をする世界
僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。 先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻 テキストファイルになるとできることあぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ
Git Sketch Plugin by mathieudutour
Git Sketch Plugin A Git client generating pretty diffs built right into Sketch. View on GitHub Download .zip A Git client built right into Sketch. The plugin really improves the review process by exporting an image for every part of the design. Every member of the team can quickly see what the next iteration will change through Github’s interface. From ... ... To Each step of the design process is
UIデザイナーはしっかり押さえておきたい、Sketch 3.5の新機能とデザインフローのまとめ
3ヵ月前にSketch 3.4がリリースされ、2016年1月26日に多くの改良とバグフィックスで新しいバージョンのSketch 3.5がリリースされました。 ※2016年2月3日現在の最新版は3.5のマイナーバージョンアップの3.5.1です。 3.5はパフォーマンスの改良だけでなく、機能的にも多くの改善がされており、今まで以上により快適なデザインフローとなるSketchの新機能を紹介します。 What's New in Sketch 3.5? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 アートボードでのタイトル表記 「Retina Canvas」のチェックボックスは除去 キャンバスのちらつきを改善 グルーピング 常に選択されたレイヤーの上に挿入 角度を数値で回転 すべてのガイドを除去 使用しているフォントをすべて表示 アートボード
PhotoshopからSketchに乗り換えて幸せになろう - mikasakasa’s blog
この記事は CAMPHOR- Advent Calendar 2015の15日目の記事です。 こんにちは、みかさです。（ @mikasaka3 ） この記事では、グラフィックソフトのSketch 3について取り上げます。僕は今までPhotoshopを使っていたんですが、つい最近Sketchを使い始めて、「最高かよ」という気持ちになりました。 そこで今回は、Photoshopと比較してSketchの素敵だと思った点（まだまだ使い始めたばかりで不十分だと思います）を挙げていきたいと思います。ついでにSketchを便利に使うためのtipsを最後にちょっとだけ付け加えています。 Sketchとは 簡単にいうとUI、Web制作に特化したMac専用アプリです。（※Windows版はありません）現在のバージョンはSketch 3.4です。 Photoshopより安い まず、Sketchを使うにはSket
2分で分かる！Sketchのさらに便利になった新機能を徹底解説
今年からSketchを使用するようになったのですが、使えば使うほど便利だなぁ、と実感する毎日です。そんなSketchは先日3.4にバージョンアップし、デザインのワークフローを改善する新しい機能がたくさん追加されました。 さらに便利になったSketchの新機能の使い方を分かりやすいアニメーションGIF付きで紹介します。 Visualize Sketch 3.4 New Features Sketch 3.4の公式アナウンスは、下記ページを参考にしてください。 Sketch Blog - Sketch 3.4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 1. アートボードをローカルネットワークで共有 2. コピーペーストの強化 3. 自動保存をオフにした方がいいのはどんな時？ 4. Material Designのアイコン作成 5.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sketch 3でデザインしたレイアウトをCSS形式で編集出来るプラグイン「CSSketch」が公開。
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
商用利用無料、UIデザインに役立つSketch用の素材のまとめ
For Sale Domain: magicmirror.design
Sketchを更に便利にパワーアップするプラグインのまとめ
10 Sketch Tricks for Designers
