##はじめに Illustratorや、Fireworksでは簡単にできていたけど、 Sketchだとどうやるんだろう？と悩んだ機能についてメモしていきます。 ##文字をアウトライン化する アウトラインをかけたい文字を選択し、 ツールバーの「Type」から「Convert Text to Outlines」を選択する。 文字がアウトライン化される。 ##塗でグラデーションを設定する 塗でグラデーションを設定する場合はまずインスペクターメニュー（右側のプロパティ設定とかするところ）から「Fill」を選択。 表示されるメニューの中から、「Linear Gradient」を選択。 放射状のグラデーションがかけたい場合は「Radial Gradient」 円錐を描くようなグラデーションの場合は「Angular Gradient」 「Linear Gradient」を選択することで、グラデーション設
こんにちは！ 株式会社スペースマーケットデザイン部の久保です。 ここ数年はデザインツールの戦国時代と言われるほど世の中には色んなデザインツールがありますが、2019年10月現在のスペースマーケットのデザイン部ではFigma をメインに使用しています。 この4年間でPhotoshop → Sketch ⇔ XD → Figma とスペースマーケットに合ったデザインツールを探して右往左往していましたが、今のところはFigma を使用するのが最適解だと感じています。 Sketch → Figma 移行時の背景や実際に移行してみての実践等は横井が詳しく記事にしてくれていますのでそちらを参考にしていただき、今回はSketch からFigma へ移行した際、そもそもなぜ移行したかったのかの掘り下げと、移行して楽になったことなどの効率面をまとめました。 移行に迷っている方から普段Figma に慣れ親しん
TL;DR justInCase で使われている Sketch ファイル管理手法を紹介します この管理手法は github で公開されています 非エンジニアでも使えるように工夫していますが、まだ改善余地があります 前口上 BitBucket にはリポジトリの許容容量が 2GB という制限があり、それを超えるとリモートへの操作が激しく制限されます。 バージョン管理システムの性質上、「ファイルの削除」しても履歴から消えるわけではなく、削除の操作が即リポジトリサイズの減少に繋がらない（むしろ増える）というのもあって、サイズリミットに達してしまうと管理が難しくなります。 バージョン管理システムで一般的に管理されるソースコード類は基本テキストファイルで、差分だけ保存していれば、それだけで 2GB を超えるのには相当な期間が必要です。 ところが、 Sketch ファイルを始めとするバイナリファイルをバ
I have a group with a transparent rectangle as the background, I'd like to export the group, make the exported png the same size as the background rectangle. but sketch automatically trims my transparent pixels. This is the layer hierarchy: The Rectangle 6 is transparent and of size 50 * 50, the star 12 is in solid color and has a size of 32 * 32, I'd like to export this group as a 50 * 50 png. I
Exporting an SVG file from Sketch is easy—but the process of making an efficient and reliable SVG, tailored to your needs, is a far greater topic. It’s actually such a complex topic that I’ve made a whole course about it, which I’m releasing today after 8 months of development! But this article isn’t a sales pitch; it’s a technical guide to a common question designers ask. A common question when e
Jorn van Dijk（@jornvandijk）のリツイートから2ヶ月近く経った先日、ようやくFramer X βの招待が届きました。Trailerが格好良すぎてReactとシームレスになるのかという期待で一杯だったので嬉しかったです。実際、AirbnbやFacebookのデザイナーもこんな感じでした。とりあえず動画を観ていただけたら。 タイトルはUSノリですが、正直Sketchはある1プロジェクトで使ったことがあるだけです。Figmaなどの他のデザインツールは使ったことがないです。なのでここでは比較を行いません。以前からあるFramerとの差分の紹介を中心にしていきます。Framerはなぜか日本では使われていない印象がありますが、これがデザイン環境の向上に少しでも参考になれば幸いです。 Linking複数画面の遷移をつくるには、FramerではFlowComponentを利用したコ
Sketch49のプロトタイピング機能を実際に試してみた カウルTechBlogをご覧のみなさん、こんにちは。カウルでプロダクトデザイナーを勤めている稲井です。主にUIデザイン〜フロントエンドコーディングまでを担当しています。詳しい業務内容は以前寄稿した記事にまとまっておりますのでそちらをご覧ください。 今回のTechBlogは、デザインツールSketchのアップデート(Sketch49)でプロトタイピング機能がリリースされたので使用感を確かめてご紹介しようと思います。はてさてプロトタイピングの戦国時代に終止符を打つ決定的な機能となり得るのか？ ※2018/03/08執筆時の感想になります。これからアップデートされていくと思いますので詳しくはSketchの機能リリースページをウォッチしてください。 https://sketchapp.com/docs/prototyping/ Sketch
dwango creators’ blogをご覧のみなさま、こんにちは。ドワンゴデザイナーのたかはしです。 普段はニコニコ動画周りの仕事をしております。 プロトタイプが作れるアプリやサービスはいろいろとありますが、それぞれ得意なこと不得意なことがあり、フェーズにあった目的が果たせるツールを選択することが大切です。 画面遷移や全体設計ではProttやinVision、より細かいインタラクションやアニメーションにはPixateやOrigami、Framerといった目的にあったツールを組み合わせて使うことでより期待できる結果をもたらしてくれます。 そこで今回は、ちょっと踏み込んだUIアニメーションが作成できるプロトタイプツールPrincipleを年末年始に触ってみたのでちょろっと紹介したいと思います。 Principle for mac 去年の夏頃、Appleの元エンジニアが開発したプロトタイピ
2017年8月18日 【前編】Sketchからノンプログラミングでネイティブアプリを作れちゃう！？「Supernova」を使ってみた。 こんにちは！ 社長室で新規サービスのデザインを担当しています田村（@wowr_t)です。 さっそくですが、皆さんは普段どのようなワークフローでアプリを開発されていますか？ Nagisaでは、デザイナーがSketchでUIを作成しInVisionでモックを作る→エンジニアがそれらを元にUIを実装するというのが大まかな流れです。 InVisionのInspect機能やZeplinの登場によって、デザイナーとエンジニアのより良い連携が可能になったと思います。しかしながら、自分は両者間のワークフローにおいて課題がまだまだあるように感じています。 特に課題感を多く持っていると感じるのは、「SketchでUIを作成してから、そのUIをもう一度コードで作成する」という二
今や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」アプリのレイヤー構造を眺め
2ヶ月くらい前にiOSDC 2017のプロポーザルを出したんですが、2つ出したうちの1つが採択されたので登壇してきました。 speakerdeck.com サンプルリポジトリはこちらです。資料だけだとわかりにくい部分もあると思うので、少し補足しておこうと思います。 Import Sketch Icons to Asset Catalog on CI Sketchからアイコンを切り出して、Asset Catalogを生成して、差分があったらiOSのリポジトリにPull Requestを出すというのをCIで自動化している話です。 私の所属するQuipper Limited.で実際に運用している知見です。 @konifar konifarという名前で、TwitterやGitHubをやっています。 プライベートで、専業主婦の嫁さんとエンジニアリングやエンジニアの仕事に関する雑談をするyome.fm
Mac用の人気ベクタードローアプリ「Sketch」。 昨年ライセンスモデルが変更され、99ドルで新規ライセンスを購入すると、その後1年間の無償アップグレードが保証されるシステムとなりました。 時期的に、従来のライセンスを購入した方も、そろそろライセンスの有効期限が切れ、上記画面のように、ライセンスの更新が要求された方も多いかもしれません。 今回はSketchのライセンス期限が切れ、最新版を使用しようとすると上記のような画面が表示された場合の対処方法を説明します。 方法1: ライセンスが有効なバージョンを使用する Sketchのライセンスは、完全なサブスクリプションライセンスとは異なり、ライセンスの有効期限内の最新版はいつまでも使用できる事が保証されています。 このため、先ほどの画面で「Download Earler Version」ボタンをクリックし、ライセンスが有効なバージョンをダウンロ
本日、BNN新社さまより「UIデザイナーのためのSketch入門＆実践ガイド（吉竹遼 著）」が刊行されました。 Amazonでのご購入はこちら （Kindle版もご用意しています） せっかくですので、執筆を務めさせて頂いた私の視点から、本書についての見どころを紹介させて頂きます。 どんな本か アプリやWebサービスなどのデジタルデザインにおいて、昨今普及が進んでいるSketchについての使い方を網羅的に解説した本です。Sketchに関する情報は、インターネット上に英語で書かれているものがほとんどのため、基礎を学ぶための環境や、リファレンスとして参照できる資料が少ないのが現状でした。ちなみに日本では電子書籍の「Sketchの基本。」が有名ですね。私自身、お世話になっております。 アップデートが頻繁に行われるソフトウェアの本を紙で出すのは勇気がいりましたが（実際、発売1週間前にバージョン44が
UIデザイナーの、のがちゃんです！ デザインスキルを上げるには、良いデザインを真似ること。私が尊敬するデザイナーの先輩達は皆口を揃えてそう言います。 １日ひとつdribbbleなどからかっこいいロゴや名刺などを選んでトレースすると良い。 そのときに、なんで自分がかっこいいと思ったのかを考えること。 デザイナーになる秘訣！Time Ticketで、石嶋未来さんに会ってきた - NOGA BLOG UIデザイナーで、本当にスキルを身に着けたい人は、新規事業とかのキラキラした仕事を求めるのではなく、TwitterとFacebookアプリをSketch3で完コピして、何故このUIなのか背景を理解して、Prottで動かして触って、iOSのガイドラインを読み込むと早いと思うよ。 — Tomo Tsubota (@tsubotax) 2016年6月12日 とはいえ、これからUIを学ぼうという方には、どう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
