自作 OSS のためのロゴを作る | micnncim
著名 OSS にあって自作 OSS に無いものの一つにロゴがあります。 OSS において README の出来不出来はユーザへのリーチを高める重要な要素であり、詳細な Description や GIF によるデモはもちろん、ロゴがあればより魅力的な README になるでしょう。 また、SNS でシェアされる際もロゴがあればより良いでしょう。 はじめにソフトウェアエンジニアの多くはデザイナーではないためロゴを作るコストは低くなく、テキストだけ作るのであればまだ簡単ですが、自作アイコンを作ることはかなりの労力を要することでしょう。 僕も同様で、デザイナーではないため、結論として非デザイナーでも出来る戦略を考えることになりました。 今回は、micnncim 流の、出来るだけ低コストで低くないクオリティの OSS のためのロゴの作成方法について解説します。 慣れれば上の画像のようなロゴが 5
いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識｜平田 / U-NEXT
いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識 平田です。普段は個人のブログに記事を書いているので、ちゃんとしたnoteを書くのはこれが初めてです。 Sketch, Adobe XD, Figma, InVision Studio について徹底的に比較を行ったので、知見をまとめたいと思います。量がかなり多いので、いくつかの記事に分けて紹介します。 1. 導入と背景知識 ◀イマココ 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回はこの連載記事の導入と、各ツールを比較する上での背景的な情報をまとめます。 概要## この記事に含まれる内容 🙆♀️ - Sketch, Xd, Figma, Studio の選定基準 - Sketch, Xd, F
Designing Christmas icons using Sketch App
It is that time of the year when you want to add a few Christmassy stuff to your websites and designs. How about doing that using Sketch because it is only $99 and it is super easy to use. Yes! Even if you have never designed before. Sketch Interface The center white space is your drawing board.Create any shape or import image using Insert from Menu bar or the top left icon that has a plus sign an
Create an Eye-Catching Water Droplet Icon With Sketch 3 | Envato Tuts+
Sketch is a very versatile tool which you can use on a daily basis for your work as a web and application designer. In this tutorial I will introduce you to the artboard, layer, drop-shadow, inner-shadow, text, border and fill functionalities within Sketch, and show you how to use it to create a simple, eye-catching icon. If this is the first time you’re opening Sketch 3, there are four things to
How to use only rectangle,circle and line to draw illustration in Sketch
I drew 18 famous robots for Chato.ps (one of our company product) before,and lots of people ask me how to do it in sketch,is that difficult?actually not,it’s super simple and quick.so I made this tutorial to show the making of. you don’t need to use a pen tool to add lots of vector point and measure, adjust the curves.and you don’t need to use mouse to look up the sketch menu to find all the funct
Best Sketch App Video Tutorial Channels You Should Subscribe
https://sketchapp.com/A list of channels that provide full tutorials as well as tips and tricks. As you may know Sketch is an amazing digital design tool for Mac. And, ever since I started using it, I’ve stopped using Photoshop for UI projects. With every new tool, it takes time to get adapted to the various functions it offer. And like every other creative professional, you need to learn it from
Free Gradients Collection by itmeo.com
Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.
How to create a flat styled icon in Sketch 3
Sketch 3 is getting very popular. More popular than you’d really imagine. You can check out some articles like this and this which talks about the new features it has just released. You can skip all this and directly download the 139kb sketch file. Its at the end of this article. So lets start. This is the final product we’d like to achieve. Might not be the exact same but you’ll learn few things
Infinity Logo Part 2 (Sketch) – Design + Sketch – Medium
This is a 3 part tutorial in which I will show you how to make this infinity logo in 3 different programs: Adobe Illustrator, Adobe Photoshop, and Sketch by Bohemian Coding. The aim is that by creating this in three different programs you will better understand the differences, advantages and disadvantages of the respective software. These are aimed at beginners, so skip ahead if it is too slow. Y
38 Best Sketch 3 Design Tutorials
Sketch AppTutorials 38 Best Sketch 3 Design Tutorials Jake RocheleauAugust 5, 20152 Comments03.3k Bohemian Coding’s Sketch 3 is the latest & greatest tool for digital design. Everyone from icon designers to mobile app designers agree that Sketch does the job well. But since it’s so new there is a distinct lack of information related to Sketch 3 for interface design. Thankfully some designers have
Sketch買ったばかりのプログラマがアイコンデザインに挑戦してみたメモ #tryswiftconf - その後のその後
「try! Swift」2日目のセッション "Live Design:🎙🎨" （日本語タイトル：ライブデザイニング）で、Sketchを使ってサクサクとアイコンをつくっていく過程を見て、 Sketch使いやすそう。買おう。 #tryswiftconf— Tsutsumi Shuichi (@shu223) 2016年3月3日 と思い *1、さっそくダウンロードして同じ手順をなぞってみることにしました。 Sketch - Professional Digital Design for Mac ちなみに購入する気満々だったのでこういうタイトルにしたものの、Free Trialで30日間は無料で使えるようです。 @niwatako さんの聞き起こし記事を参考に手順をなぞっていきます。 try! Swift ライブデザイニング:🎙🎨 #tryswiftconf Day2-10 - niwat
エンジニアのための「Sketch入門！」 1時間コース - Qiita
※「Sketch」はMac専用アプリです。Windows版はありません。 「演習ファイル＋動画＋演習付き」で記事を書いてます。 エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。 Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。 ただ、学びやすいか？といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。 ハンズオン用などにご利用ください。 Sketchとは Sketchについて一応さらっと書いておきます。 ・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。 ・$99 買いきり(2016/02 現在） 有料です。 ちなみにApp Storeでは買えなくなりました。ショバ代かかるか
さよならSketch、こんにちはFramer X｜KANTA YAMAGATA｜note
Jorn van Dijk（@jornvandijk）のリツイートから2ヶ月近く経った先日、ようやくFramer X βの招待が届きました。Trailerが格好良すぎてReactとシームレスになるのかという期待で一杯だったので嬉しかったです。実際、AirbnbやFacebookのデザイナーもこんな感じでした。とりあえず動画を観ていただけたら。 タイトルはUSノリですが、正直Sketchはある1プロジェクトで使ったことがあるだけです。Figmaなどの他のデザインツールは使ったことがないです。なのでここでは比較を行いません。以前からあるFramerとの差分の紹介を中心にしていきます。Framerはなぜか日本では使われていない印象がありますが、これがデザイン環境の向上に少しでも参考になれば幸いです。 Linking複数画面の遷移をつくるには、FramerではFlowComponentを利用したコ
無料で使えるAdobe XDの社内導入を後押しする活用事例5選 - ICS MEDIA
2018年5月の アップデートリリース に合わせてAdobe XDが無料で利用できるプランが発表されました。2017年10月に正式版がリリースされ、その後も毎月機能追加や機能改善が行われ、現在もハイスピードで開発されています。 XDはUI/UXデザインに特化しており、デザイン制作はもちろんウェブ上で動作するプロトタイプまで作成できます。PhotoshopやIllustratorと比べるとデザインに関する機能は少なめですが、XD単体でデザインを完結させることも十分に可能です。また、起動が非常に早いことや、圧倒的に動作が軽いことも魅力です。macOS専用デザインツールのSketchも人気ですが、XDはmacOSとWindowsどちらでも動作します。 XDはデザインツールと称されていますが企画や仕様策定の段階から使用されることも増えており、筆者もワイヤーフレームなどの資料作成によく使用しています
Sketchを使ったWebサイトの模写のやり方の一例 - しゃけさんのメモ
Webサイトの模写を継続的にやっているので、自分のやり方を紹介する。 本記事では模写を行なったときに得られる気づきではなく、どのように作業しているのか、を説明する。 利用環境 macOS Sierra 10.12.6 Sketch3 ver46.2 Sketchの模写用のテンプレートを用意する 僕は模写するためのテンプレートを用意している。 アートボードサイズは常に同じサイズで模写をしており、1440pxをデフォルトとしている。 フォントサイズは5種類用意。太字や中央揃えなども用意している。 2px違いずつで揃えていて、サイトによって基準のサイズを変更することもある。 サイズ名 フォントサイズ extra-large 18px (20px) large 16px (18px) middle 14px (16px) small 12px (14px) extra-small 10px (12
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Simple Technique To Create Long Shadows in Sketch 3
Sketch 3 Tutorial — Designing Google Sheets Icon – Sketch Tricks – Medium
https://creative-tweet.net/blog/2014/12/sketch-3-advent-calendar-2014-25.html
Sketch Toolbox
