Ink Transition Effect An ink bleed transition effect, powered by CSS animations. I recently came across a couple of websites using ink bleeds as transition effects. A great example is the Sevenhills website. At first I thought they were using a HTML canvas powered technique (for allowing transparency), then I checked the source code and found out they weren’t using a video, but a PNG image sprite.
今回は、パペットで動かしたキャラクターを使い、オリジナルの“遊技機の図柄風”の映像を作ってみました。 CGWORLDで記事になったりと、最近(?)、話題になっている気がします。 制作時に気を付けたところは、キャラクターとエフェクトの動きが激しい部分をインパクトの瞬間(上から落ちてきて地面に当たる部分)に集中させたところです。全体的な色味も原色に近いキツめなものになるよう心がけました。 また、本来は数字が1~8など複数あると思うのですが、ここでは7図柄のみを作成しました。 キャラクター編 キャラクター及び図柄の部分は全てPhotoshopで作成しました。 普通のイラストを描く手順で、下書き(ラフ)⇒線画⇒着色の工程を経て、最終的な色の調整はAE上で行いました。 色補正をPSで行わなかった理由としては、最終工程で結局はAEを通すことになるからです。キャラクターを動かすことと図柄の上にエフェクト
Basic usage HTML Add the segment script (less than 2kb), and define a path somewhere. <script src="/dist/segment.min.js"></script> <svg> <path id="my-path" ...> </svg> JavaScript Initialize a new Segment with the path. Then draw a segment of stroke every time you want with: .draw(begin, end, duration, options). var myPath = document.getElementById("my-path"), segment = new Segment(myPath); segment
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く