クリエイター界激震 簡単にキーフレームアニメを作れるソフトに「無料で公開していいクオリティじゃない」の声
簡単にキーフレームアニメーションを作れるフリーウェア、「AnimeEffects」が「無料で公開していいクオリティーじゃない」と話題になっています。ニコニコ動画に使い方の紹介動画が公開されているのですが、非常に大きな可能性を感じさせてくれます。 同ソフトは、1枚の絵をアニメーションさせるためのソフト。pngやjpgなどの画像ファイルも使えますが、psd（Photoshop用の画像ファイル）を読み込ませるとレイヤーなども読み込んでくれるため、より多彩な動きを実現できます。 動画では、走るポーズをとったサーバルちゃん（テレビアニメ「けものフレンズ」の主人公の1人）のpsdファイルから走るアニメーションを作製しています。手足を別パーツとして動かすことで、自然な走る動きが作成できるもよう。 psdファイルを読み込んで いろいろと作業をすると 走るアニメーションが完成 どのパーツを上に表示するかを決
LINEスタンプづくりにFireworksをおすすめする理由 - デザイナーのイラストノート
2月26日にLINEのオリジナルスタンプをだれでも制作できると言う話が発表されました。「LINE Creators Market」イラストであることが必須、png形式、スタンプだけで40個…これは…なんというFireworks向き案件！ということで今回はその理由を。 まずは概要 LINEスタンプのガイドラインによると、必要なものは メイン画像(1個) 240×240px スタンプ画像(40個) 370×320px(最大) トークルームタブ画像(1個) 96×74px 上記の画像計42個で、形式は全てPNGです。スタンプ、トークルームタブ画像は性質上背景透過になると思います。 イラストをどのアプリケーションで制作するかというのは個人の好みの問題なのですが、Fireworksで作る場合にはぜひ「ステート」機能を使うことをおすすめします。 ステートとは Fireworks CS4以前は「フレーム
ミニマルなデザインに役立つ！小さくてもくっきり分かる500種類の無料アイコン素材 -Clear Icons -Solid
個人でも商用でも、Webページでもスマホアプリでも、無料で利用できるミニマルにデザインされた小さいアイコン素材を紹介します。 500種類全てデザインが統一されており、小さくてもミニマルなので、名前の通り「Clear」なアイコンに仕上がっています！ Clear Icons -Solid ダウンロードできる素材は、Web制作者が使いやすいようさまざまなフォーマットが用意されています。 .psd .svg .png (Black & White) .csh PSDやベクターも嬉しいですが、カスタムシェイプも揃ってるのは嬉しさ倍ですね。 アイコンは全部で500種類！ ビジネスやホビーなど、さまざまなアイテムが揃ってます。
全310種、美しいソリッドなラインで描かれたかわいいアイコン素材 -Elegant Icon Font
ブログでも企業サイトでもよく見かける310種類のアイテムを美しいエレガントなラインで描いたアイコンフォントを紹介します。 Webフォントとして利用できるので、サイズやカラーなど変更しても美しいまま利用できます。.pngも入ってるので、画像で利用してもOK。 Elegant Icon Font ダウンロードできるアイコンのフォーマットは3種類。 フォント（.ttf, .woff, .eot） ベクター（.svg） 透過PNG（.png） Webフォント用のHTML/CSSも用意されているので、初心者も簡単に実装することができます。 アイコンのアイテムは全部で、310種類！ アロー、サーチ、ホームなど、よく利用するものをはじめ、ショッピングカート、タグ、クリップ、インフォーメーションなど、さまざまなものが揃っています。 以下、アイコンの全種類です。 ますは、ソリッドなラインでデザインされたもの
スマートフォンサイトを驚くほど速くする！高速化9つのポイント | Find Job ! Startup
回線が細くCPUも弱いスマートフォンは、リッチなWebサイト表示が苦手です。しかし、地道な対策で表示速度が驚くほど変化するのも事実。 今回はスマホのWebサイト表示の高速化手法をまとめました。もちろんPC向けにも効果バツグンのTips集です。 Webサイトを劇的に高速化する9つのポイント １.画像を圧縮する ２.画像はサイズを指定して使う ３.画像は適切なサイズで使う ４.CSS/JavaScriptを圧縮する ５.CSSスプライトを使う ６.不要なCSS/JavaScriptを読み込まない ７.CSS/JavaScriptをまとめる ８.CSSセレクターを最適化する ９.mod_deflateでgzip圧縮する １.画像を圧縮する 画像を最適化することは、フロントエンドの高速化に絶大な効果を発揮します。Photoshopを使って圧縮しても良いのですが、もっと手軽に圧縮
iPhoneアプリ申請やAppleの審査に関するメモ - Qiita
iPhoneアプリの申請作業を行う上で知っておいた方が良いことをまとめておきます。 一部個人の見解も混ざってます 申請ルールなどは予告なしに変更になることがよくあるので、本記事の内容は古い場合があります アプリ申請前 アプリはどこから申請するの？ App Store Connectというサイトから申請できます。ブラウザはSafariでアクセスすることをおすすめします。 ※2018/6/5 、「iTunes Connect」は 「App Store Connect」 に名称が変更されました。 誰でも申請できるの？ Apple Developer Programに登録する必要があります。（年間参加費 ¥11,800） また、アプリのアップロード時にはXcodeが必要なので、Macは必須になります。 アプリの申請時には何が必要なの？ 次の情報が必要になるので事前に準備しておきましょう。 アプリ名
「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ！
Photoshopでデザインカンプを作成して、いざコーディング！となると面倒くさいのが画像のスライス作業。 その画像のスライスを超絶楽にしてくれるツール「Slicy」を今さらながら導入しましたので使い方をご紹介。 レイヤー・グループに名前を付けて保存 アプリはMac App StoreでDLでも良し、公式サイトから体験版をダウンロードするも良し。 試しにこんなカンプを作成してみました。世界中のイケメンを紹介する、IKEMEN.comです。第一回目のモデルから頓挫しております。 データができましたら、切り出したいパーツのレイヤーorグループに名前（○○.jpgや○○.png）を付けて保存します。 あとはその保存したPSDデータをSlicyにぶち込むだけ。 見事、名前を付けた通りに画像がスライスされました:) あとはドラッグアンドドロップか、画像を選択して上のSaveボタンをクリックして任意の
[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator
かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。 かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic 今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
ActionScript のみで作った SWF をコマ落ちせずに動画にする手法
世の中には SWF を動画に変換するツールがいくつかある。 これらのツールは、SWF を再生しておいて、次々と画面をキャプチャしていって、最後に動画に変換する、というものがほとんどのようだ。変換の再現性は高い一方、どうしてもコマ落ちが発生してしまう。 これではちょっと悲しいので、ActionScript のみで作成した SWF に限って使えるコマ落ちせずに動画に変換するテクニックを解説する。前提条件は、ソースコードが手元にあり、Flash IDE を利用していないこと、ActionScript の知識があること。 wonderfl の作品を動画にする、と説明するとイメージが沸きやすいかもしれない。 enterFrame だけで描画するパターン 比較的簡単に変換できるのが、enterFrame イベントが発生するごとに描画するパターンのときである。 変換例 試しに、過去に wonderfl
全120種類、シンプルながら細部までしっかり作りこまれた商用利用無料のアイコン素材 -Application Icon Set
アイコン全120種 ダウンロードできるファイルのフォーマットは下記の通りです。 PSD: 制作用のベクターシェイプ3サイズ PNG: すぐに使う用3サイズ CSH: Photoshop用のカスタムシェイプ アイコンのライセンスはCC 3.0で、個人でも商用でも無料で利用できます。 詳しくはダウンロードファイルの「LICENSE.txt」をご覧ください。
PNG画像のファイルサイズが1/3に！PNG画像を超軽量化する「ImageAlpha」｜男子ハック
仕組みをよく理解できていないのですが、ImageAplphaは色数を減らしてファイルサイズを軽量化してくれるアプリのようです。 詳しい人がちゃんと解説してくれると嬉しいです。無知でごめんなさい。 さらには透過PNGの透過も維持したままにできるそうなので、これは是非試さないと損。 参考：透過を保ちつつpngを高圧縮するMacの無料アプリImageAlpha。素でIE6対応 以下のキャプチャ画像をサンプルに試してみました 上の画像をサンプルにファイルサイズの軽量化をImageAlphaで試してみました。 最初の状態でファイルサイズは579KBです。 PNGファイルをアプリケーションにドラッグ＆ドロップします。 画面下部にImage sizeとしてどのくらい軽量になったかが表示されます。 保存しようとすると以下のような画面が開きます。 注目すべきは「ImageOptim」にそのまま送ることもでき
商用利用無料、小さいながらも細部まで丁寧に作りこまれたアイコン素材 -Crisp Icon Set
シンプルでくっきりしたデザインのアイコンのベクター素材を紹介します。 カスタムシェイプやRetinaディスプレイ用も完備です。 アイコン全108種類 ダウンロードできる素材のフォーマットは、ウェブ制作者に嬉しいさまざまなものが揃っています。 .psd -プレビュー・シェイプ・Retinaディスプレイ用の3種 .png -そのまますぐにアイコンとして使う用 .csh -Photoshop用のカスタムシェイプ .psd, .pngは、16x16, 32x32, 48x48の3サイズが完備。 PSDはアイコンごとにレイヤーが保持されています。
[CSS]Retinaディスプレイを考慮したCSSスプライトの実装方法
新しいiPad, iPhone4, MacBook Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。 Using CSS Sprites to optimize your website for Retina Displays CSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニックです。複数の画像を一枚にまとめることで、トラフィックの軽減につながり、Googleをはじめ多くのサイトで利用されています。 Retinaディスプレイは通常のディスプレイの倍の解像度があり、最適化するためには倍の解像度をもった画像を使用する必要があります。 使用する画像をJavaScriptで記述するのも一つの手ですが、ここではスタイルシートのみで実装する方法を紹介します。 実装例は、4つのそれぞ
HTML5とjQueryでRotate｜スクロールに応じて画像を回転させる方法 – How to rotate the image by scroll | Stronghold Archive
HTML5とjQueryでRotate｜スクロールに応じて画像を回転させる方法 – How to rotate the image by scroll どうもこんにちは！今日は【HTML&jQueryでRotate スクロールに応じて画像を回転させる方法】について書きたいと思います。このところscroll連動系のサイトが多くなったのでちょっと作ってみました。個人的に直線的なパララックスサイトを作っといてなんですが回転の方が楽しいです。特定の位置で回転開始等も簡単にできていいですね。（追記：jQueryのみで画像回転を実装する方法も記事にしました。） Rotate v1 – DEMO スクロールのタイミングでキャンバスに画像に回転を付けていくバージョンです。増加のみ。fillStyle,fillRect,clearRectで残像の調整も可能です。 HTML – 共通 <div id="scr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
細部まで丁寧にデザインされたレトロ風のかわいいベクター素材 -HIPSTER BADGES
食材や料理や調理器具が200種類そろった商用利用無料のアイコン素材 -Freepik
新着記事
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
