こんにちは、私はグレーライセンス、また乾物のチュートリアルを持ってきてくれてうれしいです。
チュートリアルの内容はデザインもコードも100% 私がオリジナルです。コードはもう準備ができています簡単に使えます。オープンソースの著作権がない、安心して使ってください~
いつから、多くの大手メーカーのクラウドサイトが、このような非常に立体感のある小さなアイコンになったのかマウスの移動、移動には面白い効果があります。
▲ Alibaba cloudのトップページHttps://www.aliyun.com/
▲ マウスの移動、小さなアイコンの移動の効果
▲ テンセント雲トップページ
▲ マウスの移動、小さなアイコンの移動の効果
このような効果の実現過程を理解するために、阿灰はわざわざ詳細なチュートリアルを書いた。 これらの効果を作って実現することを教えます。デザイナーには、アイコンを作成する部分だけを学び、プログラマに自分のコードを直接コピーさせることもできます。 100% はあなたの設計が着地できることを保証します。
もちろん、私が完成した最終的な成果を見てみましょう (次の青いリンクをご覧ください)
Https://www.pslkzs.com/demo/cloud/index.html
▲ これが私が開発して作った効果です。
チュートリアルのモデルはとても簡単です。私は何時間も手をつないでモデリング、照明、レンダリングを教えることができないからです 私は最短の時間であなたに実現の全過程を理解させなければならない。 今後、あなたは自分の方式を使って、あなた自身に属する阿里雲の立体的なアイコンと効果を完成することができる。
特別説明:この文章はアリババ、テンセントとは何の関係もありません。彼のデザインはどうやって作られたのか、コードはどう書いたのか、私は全く分かりません。 私は自分の経験を利用して彼らが作った効果を考えるだけで、みんなができることを教えて、似たような効果を実現する。
初級デザイナーがプロセス全体をよく見るために、私は非常に詳細なビデオチュートリアルを録画しましたビデオで勉強することを強くお勧めしますこれにより、すべてのステップが明確になります。 会社でビデオを見るのが不便なら、私たちのテキストチュートリアルを直接見ることもできます。
-ビデオチュートリアルのセクション-
下の青い下線付き文字リンクを手動でコピーして、b駅に行ってみましょう。
教育ビデオ1:《日常前戯》
Https://www.bilibili.com/video/BV1sS4y1o7Yk
教育ビデオ2:《C4 dを使用した小さなモデルの作成効果》
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 2
教育ビデオ3:《Adobe Xdを使用した階層化された小さなアイコンの作成効果》
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 3
教育ビデオ4:《コードで効果を実現する》
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 4
UIデザイナーはコードを書く方法を学ばなくてもいいと繰り返し強調した。 納品部分の写真がどのように作られたかに注目するだけです。 もちろん、技術が多くて、ビデオ全体を見ることは知識面が広くなるのに役立ちます。 あなたと研究開発の間の仕事の流れと関係をもっとよく知っていますあなたが知るほど、あなたは発言権を持ち、誰もあなたのデザインを「実現不可能」で否定することはできません。
-文字チュートリアル部分-
チュートリアル1: c 4dは立体アイコンを作成して効果を発揮します。
最終効果
手順1C4 dを開いてキューブを新規作成します。
ステップ2ズームツールを使用してキューブを少しつぶします (右下のプロパティパネルを調整して、具体的な値を入力することもできます)
ステップ3Ctrl + Cコピー、Ctrl + V貼り付け。 コピーしたものを移動ツールで上にドラッグします。 これであなたは2つのキューブを手に入れました。
ステップ4ズームツールをもう一度使って、上のものを少しつぶします。
ステップ5一番上のキューブをコピーし、上にドラッグします。 アイコン全体が完成しました。
▲ はい、そう簡単です。
ステップ6左下の赤い枠をダブルクリックすると、マテリアルを1つ追加できます。
▲ 全部で3回ダブルクリックすると、3つの素材ボールを新規作成できます。
ステップ7先ほど新規作成した素材ボールを選択し、白、オレンジ、黒の順に変更します。
▲ 左下の角を見てください。今は3つの材質のボールがあります。
ステップ83つの材質のボールを3つの立方体にドラッグします。
▲ 右上の角を見てください。各立方体には材質のボールがあります。 これで、材質付きのアイコンができました。
ステップ9一番上の白いキューブを選択します。 フレーム0で右下の座標のH属性Kのキーフレームに向かいます。
ステップ1016フレーム目の位置で、H属性にもう1つのキーフレームを追加し、属性を180 ° に変更します
これで、上部の回転アニメーションが完成します。 効果は下図のようです。
同じ方法で、オレンジ色のキューブKフレーム。 動画全体が完成しました。 しかし今回はオレンジ色の立方体を逆に回転させて (16フレーム目のH属性を-180 ° に変更します) 、全体の効果は全部できました。
ステップ11クリックしてレンダリング> 編集レンダリング設定。 次に、入力したフォーマットがPNGで、アルファチャンネルをチェックする必要があります。 このようにしてエクスポートされたPNGは透明な背景です。
ステップ12出力するフレームを「手動」に変更し、開始フレームを0、終了フレームを16とする。
▲ 私たちのこのアニメは16フレーム作ったからです。
ステップ13「レンダリング」> 「レンダリングキューに追加」をクリックします。
ステップ14レンダリングボタンをクリックします。 これで、0-16フレーム、全部で17枚の画像がレンダリングされます。
▲ 真ん中に青いプログレスバーがあります。 あなたのパソコンの配置によって、レンダリングの速度を決めます。
これがレンダリングされた17枚の画像で、彼らは透明な背景のPNG画像で、とても完璧です。 チュートリアル3では、プログラマに渡すために、いくつかのつなぎ合わせを行います。
チュートリアル2 Adobe Xdを使用してカレンダー階層の小さな効果を作成する
最終効果
このチュートリアルを作る起源は、あるクラスメートが微信群で次の図に何か迅速に作る方法があるかどうかを尋ねたことである。 Adobe Xdの3d変換機能を考えました。 ついでに彼をアニメにしました。
▲ この写真は微信群群友のスクリーンショットから来て、どの大神が作ったのか分からない。 ここでは無料のチュートリアルをするだけで、何のビジネスもしていない。もし誤ってあなたの権利を侵害したり、あなたが不愉快になったりしたら、私はあなたの写真を使って、私を信用して削除することができる。
手順1Adobe Xdにカレンダーの正面図を描き、ここではそれを簡略化して、角の丸い長方形を4つだけ描きます。 グループの中を手に入れました。
ステップ2このグループを選択し、右側の3D変換ボタンをクリックします。
ドラッグすることで、カレンダーのアイコンを透視感のあるものにします。
ステップ3緑のボタンレイヤーを選択して、z軸を250に調整します。 このようにして、このボタンは浮遊している。
ステップ4白い長方形を選択して、z軸を150に調整します。 このようにして、白い長方形も浮いてきました。
ステップ5最後から2番目のレイヤーを選択し、z軸を80に調整します。
このようにして、この効果の最終的な効果は私たちが完成した。 次に、複数の画像をエクスポートするだけで、すべての作業が完了します。
ステップ6このグループを選択し、グループ名を「グループ20」に変更し、Ctrl + EでPNG画像をエクスポートします。 これが私たちの20フレーム目の写真です。 正確には、私たちの最後のフレームの画像は、20フレームほどではないかもしれないからです。
ステップ7私たちの第三層の矩形のz軸を0 (もともとは80) に変更し、グループの名前を「グループ19」に変更します。 グループを再度選択すると、Ctrl + Eは19フレーム目の画像をエクスポートします。
ステップ8白い長方形のz軸を75 (元は150) に変更し、グループ名を「グループ18」に変更します。 グループを再度選択すると、Ctrl + Eは18フレーム目の画像をエクスポートします。
ステップ9白い長方形のz軸を0 (もともとは75) に変更し、グループ名を「グループ17」に変更します。 グループを再度選択すると、Ctrl + Eは17フレーム目の画像をエクスポートします。
ステップ10緑のボタンレイヤーを選択し、z軸を直接0に変更し、グループ名を「グループ16」に変更します。 グループを再度選択すると、Ctrl + Eは16フレーム目の画像をエクスポートします。
これまで、z軸は全部で5枚の写真がありました。 これがz軸が上がったすべてのアニメです。 次に、回転角度のアニメーション画像を再度作成します。 グループ全体を選択すると、三次元変換先のx軸回転が手動で12 ° 、y軸回転が-43 ° に調整されていることがわかります
ステップ11Y軸を-33 ° に回転させ、グループ名を「グループ15」に変更します。 グループを再度選択すると、Ctrl + Eは15フレーム目の画像をエクスポートします。
ステップ12Y軸を-23 ° に回転させ、グループ名を「グループ14」に変更します。 グループを再度選択すると、Ctrl + Eは14フレーム目の画像をエクスポートします。
ステップ13Y軸を-13 ° に回転させ、グループ名を「グループ13」に変更します。 グループを再度選択すると、Ctrl + Eはフレーム13の画像をエクスポートします。
ステップ14Y軸を-0 ° に回転させ、グループ名を「グループ12」に変更します。 グループを再度選択すると、Ctrl + Eは12フレーム目の画像をエクスポートします。
Y軸回転のアニメーションは全部できました。次に、x軸回転のアニメーションを作ります。やり方は基本的に同じです。
ステップ15X軸を6 ° 回転させ、グループ名を「グループ11」に変更します。 グループを再度選択すると、Ctrl + Eは11フレーム目の画像をエクスポートします。
ステップ16X軸を0 ° に回転させ、グループ名を「グループ10」に変更します。 グループを再度選択すると、Ctrl + Eはフレーム10の画像をエクスポートします。
これで、私たちはカレンダー全体が来ています。 すべてのアニメーションに必要なフレーム画像が手に入りました。 さっき保存した写真を見てみましょう。グループ10-グループ20からは、実は11枚の写真しかありません。 つまり、実は私たちは11フレームしかありません。
ハハ、私たちのこの効果の製作過程がこんなに簡単で乱暴だとは思わなかったかもしれません。 創作をする過程で、我々は大胆に考え、勇敢にやってみなければならない。兄弟たちは覚えています。勇気があれば、鬼女も産休させることができます!
Xdの効果的なチュートリアルはここで終わります。チュートリアル3では、プログラマに渡すためにいくつかのつなぎ合わせを行います。
チュートリアル3は、マウスの移動、移動のアニメーション効果をコードで実現します。
次に、私たちは以前に作成した2つの効果を、お届けする長い画像につなぎ合わせます。 写真の中の余分な空白を切って、縦の長い図につなぎ合わせる必要があります。 具体的には下図を見てください。
以上の手順では、PSのようなソフトウェアを使って自分で手動で手に入れ、裁断した枚葉画像の幅、高さ、そして全部で何枚かの画像を覚えておく必要があります。 この3つの重要な情報があれば、プログラマはコードを書いてすべての仕事を完成することができる。
次に、私が開発したプラグイン「PS効果コードアシスタント」を使ってすべての仕事を完成し、プラグインは自動的に成長画像を生成します。
プラグインのダウンロード先:
Https://www.pslkzs.com/animate/index.php
次のステップはプラグインで生成されます。プラグインを使わなければ、大丈夫です。自分で写真をつなぎ合わせることができます。 手動でつなぎ合わせるのは難しいことではありませんが、ちょっと面倒です。成長画像をつなぎ合わせることはPS (または他の設計ソフト) 操作の基礎であるので、ここでは文章を書いて説明しない。
手順1PSを開き、1920*1080解像度72dpiの空白文書を新規作成し、「PSダイナミックコードアシスタント」というプラグインを開きます。
ステップ2プラグインをクリックして初のボタンをインポートできます。 あなたが以前にc4 dエクスポートシーケンスフレームを格納していたフォルダ (フォルダ内にはpng画像しかなく、他に何もない) を選択すると、すべての画像がPSに「配置」されます。
▲ 右下のレイヤーパネルには、0-16の合計17枚の写真があります。
ステップ3プラグインの2番目のボタンをクリックすると、自動的にソートされます。 クリックすると、レイヤーの順序ができます。
ステップ4をクリックしてプラグインの三つ目のボタン、カット図を最小化する。 このようにして、写真の空白部分は自動的にカットされます。
余分なサイズは切り取られていますが、現在もアイコンの幅は400ピクセル以上あります。小さなアイコンが一つだけ必要です。
ステップ5画像> 画像サイズ、幅を100に変更すると、アイコン全体が小さくなります。
▲ 覚えチェックなどの割合の縮小ボタンをクリックします。 これで幅も高さも全体的に小さくなります。
ステップ6プラグインの4番目のボタンをクリックすると、効率的なファイルが生成されます。 Htmlと結合された長図が含まれています。
デスクトップには生成されたフォルダがあり、そこにはhtmlファイルと結合されたpng画像があります。このhtmlファイルを開くと、生成されたコードが見えます。
▲ 効果コードアシスタントは循環効果を生成するツールですが、今回はこのような再生の効果が必要ではありません。 私たちはそれが良い長図を生成するだけです。
これが生成された長い図で、私たちが必要としているものです。 とても完璧です。
▲ プラグインはまだ親切で、生成された画像に意味のある名前をつけた。 画像の名前は、w 10031/43steps17.pngです。wは幅を表し、hは長さ全体の高さを表し、stepsは全部で何フレームあるかを表します。 つまり、単一の小さな画像の幅は100、高さは1347/17 = 79で、全部で17フレームです。 これらの重要な情報はプログラミングに使われます。
ここまでで、UIデザイナーの仕事はすべて完成した。 残りの部分はすべてフロントプログラマが完成した。 あなたがコードを习得したい、またはあなたの家のプログラマーがそれを実现する方法を知らないならば。 このビデオを見ることができ、中には私を録画した1行ずつコードを書く実現の過程。
ビデオチュートリアルのアドレス:
鄂公网安备 42010202002647号