タグ

ブックマーク / webnaut.jp (2)

  • 実は簡単!3分で分かるSVGアイコンの作り方 | WebNAUT by Beeworks

    ※この記事は2017年3月30日に執筆された記事です。現在は仕様が異なる可能性があります。 スマートフォン、Retinaディスプレイ、など高解像度ディスプレイへの対応にSVGが注目されるなか、WebNAUTでもリニューアルに伴いアイコン類を全てSVGにしました。この記事では、サイトのリニューアルや立ち上げなど、沢山のアイコンをSVG形式で作るときに役立つ方法を紹介します。 SVGとは? “Scalable Vector Graphics”の略称であり、簡単に言うとweb上で使える拡縮可能なベクター画像です。主に下記のようなメリットがあります。 スマホ対応・Retina対応も1つのファイルでOK 同じデザインなら、スマホ用、hover用、色違い…、などいくつもpng画像を用意する必要はありません。また、結果的に画像が減るのでHTTPリクエスト数の削減にも繋がります。 後からサイズや色の調整が

    実は簡単!3分で分かるSVGアイコンの作り方 | WebNAUT by Beeworks
    rikuo
    rikuo 2017/04/03
  • 縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks

    モバイルサイトのデザインデータなど、縦長の画像を自動分割して印刷用に1枚にまとめるツールを作成しました。 データのアップロード等も不要ですので、機密性の高いデータを印刷する場合でも安心して無料でお使いいただけます! 明けましておめでとうございます。年もWebNAUTをよろしくお願い致します。私の新年1目の記事は特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させていただきます。 デザイン確認時のよくあるやりとり ディレクター: ここでディレクターさんはデザインの確認と指示出しをどのように行うでしょうか? デスクトップ上で修正指示を書き込むようなアプリも幾つかありますが、やはり見やすさや書き込みのしやすさでは紙に印刷して手書きで指示を書く事が多いと思います。 その際、縦に長い画像を印刷しようとすると一般的なアプリではこのようになってしまいます

    縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks
  • 1