イラストや実写画像を大きく拡大すると輪郭がぼやけてしまいます。無料のウェブアプリ「Vectorizer.AI」を使えばイラストや実写画像を無限に拡大可能なSVG形式に変換できるとのことなので、実際に使ってみました。 Trace Pixels To Vectors in Full Color, Fully Automatically, Using AI - Vectorizer.AI https://vectorizer.ai/ 以下のGIGAZINEのロゴの「G」の部分です。 「G」を拡大すると、こんな感じに輪郭がギザギザ・ボヤボヤになってしまいます。JPGやPNGなどの画像形式では画像を小さな四角いピクセルの集合として表現しています。これは言い換えると「超高精細なドット絵」のようなものなので、画像を拡大すると輪郭がギザギザになったりぼやけたりしてしまうわけです。 「超高精細なドット絵」の
ChatGPTはテキストを生成するGenerative AIであるが、SVGのようなテキストフォーマットの画像であれば描くことができるのではないか？と思い、試してみることにした。モデルにはGPT-4を使用し、GPTにひよこ🐤を描かせることをゴールとして始める。 (私) svgのフォーマットを知っていますか？はいかいいえで答えてください。 (ChatGPT) はい (私)では、svgのコードをあなたに書いてもらいます。まずは正方形のsvgコードを書いてみてください。 (ChatGPT) 以下のコードは、SVGフォーマットで正方形を描画するものです。 このコードでは、正方形の大きさを100x100ピクセルに設定し、色を青（blue）に設定しています。必要に応じて、大きさや色を変更してください。 ChatGPTが描いた正方形 （これは簡単だろう）<svg width="100" height=
オープンソースのSVGアイコンを探すときに大変なのが、好みのデザインを見つけることだと思います。たとえば、検索用の虫メガネアイコンだとレンズの大きさ、持ち手の長さ、レンズと持ち手のバランス、ストロークの太さなど、いろいろなデザインのアイコンがあります。 オープンソースのさまざまなアイコンを横断検索して、好みのデザインを見つけることができるSVGアイコン特化の検索エンジンを紹介します。 Iconhunt Iconhuntは、オープンソースのアイコン（約150K）を対象にした検索エンジンです。キーワードを入力すると、各ライブラリのそのアイコンが一覧で表示されます。アイコンはすべて、MITライセンスの下でライセンスされているIconify -GitHubに従っています。
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォー
AIでグラフィック・デザイナーの幅が広がる。 プロンプトと呼ばれるテキスト入力を駆使して、AIが人智を超える壮大なデジタル絵画を創造したり、とにかくかわいい美少女イラストが生成できるようになった昨今。 Photoshopで微調整するくらいなら可能でしょうけども、Illustratorでガッツリ変形できるようなベクター形式での生成はないんじゃないかと思います。 待望のベクター素材生成AI新しく始まったサービス｢Illustroke｣は、テキストから生成した画像をSVG（スケーラブル・ベクター・グラフィックス）でダウンロードが可能です。 ビットマップ形式だと印刷に耐えうる解像度が不足していたり、拡大したら粗くなります。一方でベクター形式だと、どれだけ拡大しても線や塗りはキレイなまま。デザイナーだったら提供される素材はベクターを好みます。 "An obese cat"in Flat StyleC
ビジネス系のサイトをはじめ、ランディングページ、ポートフォリオ、もちろん個人ブログにもぴったりなイラストのSVG素材が無料でダウンロードできるサイトを紹介します。 シンプルでセンスのあるイラストが揃っており、しかもクレジット表記不要の太っ腹ライセンスなので、使い勝手がよいと思います。 unDraw unDrawの特徴 イラストのSVG素材 素材のダウンロード unDrawの特徴 unDrawではランディングページ、スマホアプリ、プロダクトなどで利用できるイラストのSVG素材が無料でダウンロードできます。 イラストのフォーマットは、SVGと透過PNG イラストのテーマカラーは変更可能 MITライセンスで、使用時のクレジット表記は不要 テーマカラーの変更は、オンラインで簡単にできます。SVGだけでなく、PNGにも対応しています。
担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる こんにちは、まろCです。 最近、僕が担当した JOYSOUNDのキャンペーンサイトで、いろいろな賞を受賞することができました。 CSSREEL Design Awards Asis CSS WINNER 今回は、このような演出を入れるサイトで僕がいつも使っているJavaScriptライブラリや、webツールを晒したいと思います。 アニメーションの基本的なフロー 基本的に、アニメーションはCSSにtransitionやanimationで記述しています。 javascriptで、ロードやスクロールをトリガーにして、その要素にaddClassやremoveClassしてアニメーションを発動しています。そのほうが軽いからです。 より複雑、かつ連動して動かしたい場合は、ライブラリを使用し
2016年11月24日 JavaScript, jQuery, SVG 今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ ラインアート 1. DrawSVG See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. Webサイト｜GitHub｜デモ SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $('#my_svg_element').draw
かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換
2016年にリリースされた、ウェブデザインの制作時間を節約できる無料ウェブツールやアプリをまとめてご紹介します。インストールなどする必要もなく、ブックマークしておけばいざという時にも便利です。 今回は、デザインツールを以下のカテゴリーごとに分けています。お気に入りのツールを見つけてみてはいかがでしょう。 コンテンツ目次 1. Web タイポグラフィー関連ツール 2. 配色カラー関連ツール 3. Web ベース CSS 関連ツール 4. レスポンシブ・ウェブデザイン関連ツール 5. ウェブパフォーマンス関連ツール 6. オンラインチェックリスト、ガイド、参考リファレンス 7. 画像イメージ関連ツール & 編集エディター 8. ウェブデザイナー向けお役立ちディレクトリ 8. その他ツール Web タイポグラフィー関連ツール Type Anything ウェブサイトで利用したいフォントを試すこと
開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化によって自由でカスタマイズ性の高いローディングアニメーションがたくさん登場しています。 今回はコピペで利用できるCSSローディングアニメーションを、コミュニティサイト Codepen よりピックアップしご紹介します。 よりオリジナル性の高いデザインを作成することができ、待ち時間が楽しみになるようなエフェクトを中心に揃えています。どうしてもファイルサイズが大きくなってしまうページなどに活用してみてはいかがでしょう。 詳細は以下から。 待ち時間が楽しくなる、CSSコピペで実装できるローディングアニメーションまとめ #22 – Loader with Pure CSS 動きに合わせて、背景のグラデーションカラーが美しく変化するローディン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
