デザイン力を上げるトレースのいろは
はじめに 以前（2年半前、当時学生）、Webデザインの勉強中にトレースの記事を書いたことがありました。 こんなサムネイルを見たことがある人が居るかもしれません..。（記事は昔のものなのでリンクは貼りません） なぜかこの記事が未だにじわ伸びし、noteで紹介されたりしており、「まずい..」と思ったため新たに記事を書くことにしました。 ちなみにサーチコンソール見ても「Webデザイン トレース」の検索が多く、勉強したいけどやり方がわからない人が多くいるんだなと再認識しました。 学生の時の私もまさにそれで、デザイン系の学部に通っていたため「じゃあデザインできるんだね！」的な印象を持たれがちでした。 でも大学ではWebやアプリのデザインの授業があるわけではないので、その辺は独学だったり、アルバイト先のデザイン事務所で教えてもらったりで勉強していました。 トレースは実際に手を動かすので、ツールの勉強に
SVGの各アプリケーション書き出しをあれこれを調べてみた - デザイナーのイラストノート
このブログのロゴにも使用していますが、最近よく目にするようになったSVG。イラストにはうれしい画像形式なので、とても注目しています。しかし、制作するグラフィックツールによって書き出しの設定が本当にまちまち・・・ということでいろいろ試してみた結果です。 SVGとは Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）で「SVG」。拡大縮小しても荒れない画像形式ということで、ロゴやアイコンなどに使用されるシーンも増えてきました。テキストエディタで編集できたり、CSSで色を変えたり、グラフィックツールがなくても画像を編集することができるのが特徴です。タイムリーにも、先日MicrosoftのOfficeでも、SVG形式が利用できるようになるというニュースもありました。 SVGの利点として、変更の差分が取りやすくGitなどで管理しやすい、ということがあります。例
解像度(dpi)について解説、ピクセル・ミリ・センチ相互変換
「dots per inch／ドット・パー・インチ」の略で、「1インチ（25.4ミリ）あたりのドット数」を表す単位です。例えば72dpiは、1インチの中に72個の点があるということです。1インチ(25.4mm)を72で割ると0.35277・・・8ミリ。約0.35ミリです。1cmの画像は、約28ピクセルになります。※インチとミリの誤差があります。 「pixel per inch／ピクセル・パー・インチ」の略で、「1インチあたりのピクセルの数」を表すピクセル密度の単位です。 例えば326ppiは、1インチの中に326個の画素密度（pixel density）があるということです。 1cmあたりの画素数は、解像度200ppiの場合約79pixelなので 1cm×1cm＝1cm2の画素数は、6241画素になり 解像度300ppiは、約118pixelになり 1cm×1cm＝1cm2の画素数は、13
最近のデザインで使われている、ロゴ・ブランディング・Webサイトのガイドラインのまとめ
Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。 ロゴやブランディングも引き出しを増やすためにも参考にしたいですね。
これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
アクセシビリティからはじめる、WebサイトのUXデザイン
デザイニングWebアクセシビリティ刊行記念イベント <http: /> で使用したスライドです。Read less
スマホの画面解像度シェアを調べてみた（2020年1月版） | webseeya
※本ページは随時更新しています。過去のシェアデータはページ下部に移動しました。 以前、当ブログにて書きました「モニター解像度のシェアを調べてみた（2019年1月版）」に続き、スマートフォンの画面解像度シェアを調べてみました。 前回はデスクトップやタブレットでしたが、今回はiPhoneやAndroidといったスマホを対象としたデータです。 スマホの普及に伴い、スマホ専用サイトやレスポンシブデザインで制作する機会が増えてきましたのでサイト設計やデザインをされる際の参考にして頂ければと思います。 なお、本記事ではアイルランド発祥のアクセス解析サービス「StatCounter」よりダウンロードできるPING画像を利用しています。サイトではCSV形式のデータも提供されていますので必要な方は直接サイトをチェックしてみてください。 StatCounterについての詳細は「StatCounterとは？デー
「えーと、画像は全部2倍で作ればOKなんだよね？」を卒業しよう — un-Tech
お疲れ様です、大塚です。 Appleの新製品発表会が間近に迫ってきましたね。新しいiPhoneの発表はもちろんのこと、今年の「One more thing」も楽しみです。 しかしながら、新しいプロダクトにドキドキ・ワクワクしながらも、心のどこか冷静な部分で、 「また新しい解像度が出てきたわ…」 と、新しい苦悩を抱えてしまうエンジニアやディベロッパーの方も多いのではないでしょうか？高解像度ディスプレイを搭載したマルチデバイスへの対応は、なかなか骨が折れる作業ですからね。 …え、仕組みがよくわからないままコーディングしていたって？？ そいつぁーまずい。 なぜ、多くのスマートフォンやタブレット向けのWebサイトでは、画像が2倍で作られているのか？ その理由と、ディスプレイや解像度の仕組み、今日ここで覚えていって頂戴。 ディスプレイの仕組み ぼくたちが普段使用している、PCやスマートフォンのディス
The Typographic Details Behind Typewolf’s Favorite Sites of June 2015 · Typewolf
The Typographic Details Behind Typewolf’s Favorite Sites of June 2015 This is the 17th installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for May here. Mister French The type on this site is spaced rather loosely with added
Photoshopスウォッチの管理方法
Photoshopを使う際、煩雑なカラースウォッチで作業している方向けの記事です。 今までスウォッチを特に意識していなかった方にもおすすめです。 案外面倒で放置しがちなスウォッチですが、 整然と管理することで確実に生産性は上がります！ スウォッチを使いこなせば、同じ色と思って使った色が微妙に変わってしまったり、 無駄に色数を増やしてしまいデザインが崩壊するのを防ぐことができると思います。 スウォッチで出来ること 細かく言えば色々ありますが、今回は特に重要な部分を紹介します。 カラーの追加 カラーの削除 スウォッチの保存（カラーリストの保存） スウォッチの読み込み（カラーリストの読み込み） スウォッチの置き換え（カラーリストの置き換え） 簡単に言うと、カラーセットを保存できるし、読み込めるのです。 デザイン（プロジェクト）毎にカラーセットを作る カラーセットは凄く重要です。 これを整理するた
サントリーホールディングス｜水と生きる SUNTORY
「迷ってないで、動き出す。」 「半端はだめ、やり切ろう。」 「とにかく、どんどん挑戦できる…」 社員の数だけある、 たくさんの「やってみなはれ。」 あしたもきっと、あたらしい、 サントリー。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Wonderful World of SVG
Start A Fire
Material Design
The Blog | Welcome to Adobe Blog