広告デザイン事務所AMIX | 広告デザインの依頼・外注はお任せください
広告デザインは時に感動を生みます。広告に必要な情報を機械的に書いていても、元々興味を持っている人しか読むことはありません。しかし、デザイン性に優れているものは、ビジュアル面のインパクトやメッセージで多くの人の気持ちをとらえ、もっと深く知りたいと思わせるようなパワーを持っています。これは、アート系の広告デザイン以外でも効果があり、オープンした店舗の告知や店舗で一大イベントを開催するときなど、注目を集めるのに効果的です。また、デザインをある程度固定にすることにより、店舗のイメージを何度も認識してもらえるというメリットもあります。広告で感動を受けた人は、その広告デザインを打ち出している企業に対しても好感を持つ傾向がありますので、第一印象を良くしたいとき、企業イメージを高めたいときに力を入れた広告デザインを打ち出すのは良い手段と言えます。
文字レイヤーを支える技術 - pixiv inside
こんにちは、型と複雑GUIが大好きな @f_subal です。 普段は pixivFACTORY というサービスでフロントエンドをやっています。 さて、早速スクショでお見せしていますが、 今年の3月に pixivFACTORY のグッズ編集画面はリニューアルしました。 すでにこちらの記事でも紹介がありましたが、 新しい画面では、画像のみならず文字を使ったデザインができるようになっています。 フォントワークス および MonoType の書体が 100 スタイル分利用可能です。 文字だけでの制作も可能ですので是非ご利用ください。 https://factory.pixiv.net/item_groups/new 今回は、このテキスト入力機能のフロントエンド実装、 特に React と SVG でいかに文字レイヤーを表現するかについてご紹介したいと思います。 SVG にとって文字レイヤーとは何
書いて覚えるSVG: 基礎編
この記事のターゲットとなる方 この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。 記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。 ぜひ記事を読みながら一緒に書いてみてください。 SVGは他の画像形式と何が違うの？ この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか？ たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。 しかし、SVGはJPEGやPNGと明確に違うところがあります。 SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。
基礎から学ぶ、IllustratorでSVGを最適化して書き出す方法
SVGをWeb制作で使うために、ブラウザーに最適化されたSVGファイルの作成、書き出し、最適化の方法をマスターしましょう。 SVGの勉強を始める前に理解したいことがあります。SVGファイルの最適化は、作成から書き出しまで続く工程です。WebページのHTMLと同様、不出来なSVGファイルを完成後に修正するのは大変です。 書き出してから使える最適化ツールもありますが、想定外のことが起こってファイルが壊れる場合があります。SVGを最適化する確かな知識を身につけ、SVGを活用しましょう。 IllustratorでSVGを作成 SVGをIllustratorで作成するには、最終的な出力がWeb用にうまく最適化されるよう考慮して、以下の工程を進めます。 適切なカラースペースを設定 大半のベクター画像用ソフトウェアと同様、Illustratorは印刷物向けに設計されているため、カラースペースはデフォルト
Webフォントを使ってIllustratorで作った文字組みをWebで再現する方法《SVG→HTML変換》
はてなブックマークで話題のページでこんな記述がありました。（以下は原文ママ） 文字の間隔や改行位置がデバイスやユーザーの環境によって変わり同じ見た目を保証できない中、それをコントロールすることに注力すべきでしょうか？それを実装するエンジニアの工数は効果に見合ったものでしょうか？ユーザーはどんなメリットが得らるのでしょうか？何をもって美しいタイポグラフィとするのでしょうか？ Dear Web designer（Medium）なるほど。 でも、作り手の苦労はクライアントからしたら結構どうでも良くないですか？ クライアントも、何の考えもなしに「紙とWebって同じようにできませんかねぇ」と言っているのではなく、（レイアウトやタイポグラフィ含め）印刷物で表現した世界観をWebでも同じように再現できれば、「紙のカタログは凝っているけど、ウェブはちょっと違うな…（メイリオフォント）」みたいな世界観の断絶
[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション
[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション 最終更新日：2017年11月16日 （初回投稿日：2017年04月22日） SVGアニメーションの続きです。 前回は CSSだけで作るドローイングアニメーションをやりましたが、今回は JavaScriptのライブラリを使って初歩的な SVGのモーフィングアニメーションを作ってみました。 本日のINDEX Snap.svg でモーフィングアニメーション クリックでモーフィングするサンプル 連続ループでモーフィングするサンプル モーフィングの応用（他サイト様をメモ） その他 SVGアニメーションのための JavaScriptライブラリ Snap.svg でモーフィングアニメーション Snap.svg は Adobe社が提供しているライブラリです。 これを利用すれば、モーフィングだけでなく、かなり複雑なアニメーシ
![[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション](https://cdn-ak-scissors.b.st-hatena.com/image/square/c45e8f5f3f125fcbd6360ee956d828c6ae8dd2d4/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-121.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F170320-3.gif)
フロントエンドの画像軽量化まとめ【2017年版】 - KAYAC engineers' blog
こんにちは、面白法人カヤック フロントエンドエンジニアのごんです！ 今回は、Webの画像の軽量化について、フロントエンドチームで使ってるツールややり方をまとめてみました。 画像の軽量化などで困ってる方の参考になればと思います。 なぜ画像の軽量化をするのか Webサイトのローディング時間は、ユーザーの直帰率やコンバージョン率に関わる大切な指標です。 ローディング時間に関わる要因はさまざまですが、 特に画像は容量が大きいため、画像の軽量化をすることで表示速度の大きな改善を望むことが出来ます。 例えば、当ブログのある記事は、画像が全体の容量の約1/3を占めていました。 一般に、PhotoshopやIllustratorから出力された画像は、十分な色数やクオリティで出力されており、 ツールなどを使うことで、見た目をそれほど損なわず、容量を大幅に減らすことができます。 また、一部の画像形式には、メタ
JPGの圧縮率とPNGの透過を実現する超軽量なJPNG.svgを試してみた | SONICMOOV LAB
Web制作においてはページの表示スピードを意識してコーディングすることも多いかと思いますが、特に画像は見た目の品質を落とすことなくなるべく容量を抑える必要があります。画像の容量を抑える中で透明度の情報をもったPNG画像を使用する場合、その画像の内容によっては容量が大きくなることがあります。 例えば、このヒマワリの写真をこのままでの状態でPhotoshopで圧縮して書き出しをすると52.7KBの容量ですが、背景を削除して透過PNGとして書き出すと220KBまで容量が大きくなってしまいます。 透明度を持ったPNG画像をTinyPNGのサービスを使えばそれなりに容量を落とすこともできますが、今日は「JPNG.svg」というちょっと面白いサービス、というかページを見つけたのでそれを紹介したいと思います。 「JPNG.svg」は、JPGの圧縮率とPNGの透明度を持ったSVGに変換してくれます。上記の
EPUB内にSVG形式で数式を配置する | jittodesign blog
TeX2imgはSVGファイルも書き出せる 昨日ダウンロードした「TeX2img」は、SVGファイルも書き出せるようなのでやってみました。TeX2imgにコードを入力します。出力画像ファイル名の拡張子を「.svg」にして画像生成します。 無事にSVGファイルが書き出せました。 Safariでもちゃんと表示されています。 EPUBにSVGファイルを使用する InDesignから書き出したEPUBを解凍して、OEBPSフォルダのimageフォルダに書き出したSVGファイルを入れます。 OPFファイルの編集 content.opfファイルを開いて、manifestタグにSVGファイルを追記します。SVG形式のメディアタイプは「image/svg+xml」です。
Illustratorで効果や加工をかけたオブジェクトをSVGで書き出したらどうなるか
拡大縮小なんのその、ベクターと言えばこのツール。 ということで、そんなIllustratorを起動しない日は年に50日くらい、ベクターデータと戯れるデザイナーたあです。 近年はSVGイエーイってことで、「Webデザイン？Photoshopに決まってんだろすっとこどっこい一昨日きやがれ！」と言われることも少なくなってきて、わたし大好きIllustratorも再度見直されているのをひしひしと感じでおります。 でもね。 ちょっと前にイラストレーターからSVG書き出しをしたら「あれこれ思ったのと違う感じになっちゃった」ってこともよくあって、一度「Illustratorで効果や加工をかけたオブジェクトをSVGで書き出したらどうなるか」試してみなきゃな。とか思っていたんです。で、以前試したんです。 その結果をご報告しますので何かの参考に（たぶんならないけど）してください。 まずはどんなデータを書き出し
svg / canvas出力ができるbodymovinの紹介 - KAYAC engineers' blog
やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で１番プログラムできないおじさんの町田（@machida-yousuke）と申します。 今回は、「映像業界?フロントエンド業界？が注目しているオープンソースライブラリ bodymovin」について紹介します。 ちなみに私は、元某インターネット広告代理店の映像クリエイター兼フリーランスのモーショングラフィッカーでした。 ※この記事はAfterEffects（以下「AE」と称する）の基本的な操作、用語を理解している前提で進めていきます。 ※bodymovinのバーションは V 4.6.10、AEのバーションはadobe AfterEffects cc 2017で進めていきます。 （V 4.6.10から使用言語によっておきるバグの修正がされています。） ※使用PCはMacです。 bodymovinとは AE
小さくてもくっきり見えてすごい！精巧で美しくデザインされたSVGのフリーアイコン素材 -Zondicons
ユーザーが一目で分かるよう精巧で、幾何学的な美しい図形でデザインされたユーザインターフェース用のSVGのアイコン素材を紹介します。 個人でも商用でも無料で、企業サイトなどにも利用できます。
完全無料のベクターグラフィックエディタ『Boxy SVG』 - Macの手書き説明書
カテゴリ：グラフィック&デザイン開発ツール 現在の価格： 無料 販売元： Jaroslaw Foksa 対応OS：10.11以降 広告もなく、サイトへのサインアップも必要なく、アプリ内課金で解放される機能もない、完全無料のベクターグラフィックエディタです。 まっさらな状態からベクターグラフィックを描き出していくこともできますし、SVGファイルの読み込み・書き出しができます。 原子のSVGファイルは Welcome to the SVG Web Demo! から。 デザイン関連の職についていないので素人判断ですが、見るからに高機能。 100以上のメニュー操作にはそれぞれオリジナルのキーボードショートカットを割り当てることができます。 Mac App Store で見る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
汎用的で使いやすいアイコンを意識してデザインされたオープンソースのSVGアイコンセット・「Humbleicons」
【30秒で完成】簡単かつ一瞬でイラストをイイ感じに水玉柄に色塗りしてしまう方法 | Linustock(ライナストック)
高機能ペイントソフト「Krita」がv4.0に ～SVGやPythonスクリプティングをサポート／ベクターフォーマットはODGからSVGベースに。パフォーマンスや使い勝手の向上も
GitHub - svg/svgo-gui: Node-WebKit based GUI for SVGO
ブラウザでSVGを編集、ダウンロード出来るWebサービス・「Vecteezy Editor」
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
OfficeアプリがIllustratorなどのSVG画像の挿入/編集に対応 ～無償のSVGアイコンライブラリも提供
