目次
(暖かいリマインダー) : この反転チュートリアルは比較的基本的ですが、非常に便利で、初心者が学ぶのに適しています)
ホームページ ウェブフロントエンド htmlチュートリアル AIが作ったイースター icon_html/css_WEB-ITnose

AIが作ったイースター icon_html/css_WEB-ITnose

Jun 24, 2016 am 11:22 AM

初心者が学ぶのに適しており、良いものがいくつかあります

AI を使用してイースター アイコンを作成する方法

原著者: Yulia Sokolova

翻訳: Zui Xiaoshuai (2016/03/27)

(暖かいリマインダー) : この反転チュートリアルは比較的基本的ですが、非常に便利で、初心者が学ぶのに適しています)

イースターは、伝統的な色の卵で知られる素敵な春のお祭りです。多くの場合、暖かさ、豊かな色、春のような雰囲気を連想させます。このチュートリアルでは、制作プロセスを詳細に説明し、基本的な形状、パスファインダー、およびいくつかの新しい AI ツールを使用して、このコースのイースター エッグを作成します。 (楽しみにしてますか~~~)

もちろん、これらのテクニックはイースターエッグを作る過程で使用されるだけでなく、あらゆるタイプのフラットアイコンやフラットバナーの作成にも使用できます。 Envato Market (海外のデザイン リソース Web サイト) を通じて、興味のある学生は壁を越えてさらに多くのリソースを見ることができます。これは非常に良いことです!) フラット グラフィックの同様の例をたくさん見つけることができ、さらにインスピレーションを得ることができます。

お祝いのイースターアイコンを作ろう

ステップ 1:

卵の基本的な形を作ることから始めましょう!楕円ツール (L) を使用して、70X70 ピクセルの円を取得します。ダイレクト選択ツール(A)でサイドアンカーポイントを選択し、少し下にドラッグして底部の形状を拡大します。次に、上部のアンカー ポイントを選択し、上にドラッグして卵の上部のポイントを作成します。

ステップ 2:

暖かい色調の明るい春のような色を適用します。これは、Shift キーを押しながらスポイト ツール (I) を使用して、下のスクリーンショットから直接取得できます。将来この色を使用できるように、卵の基本形状を黄色で塗りつぶします (ctrl+c->ctrl+b)。

次に、卵の上にいくつかの装飾要素を追加しましょう。長方形ツール (M) を使用して、70X15 ピクセルの青色の形状を作成します。

ステップ 3:

線分ツール () ツールを使用し、Shift キーを押したままにして、水平 3 ポイント (3 ポイントの幅)

ピンクの線の形状を作成します。すべての形を卵に合わせて配置しましょう。すべてのシェイプ要素を選択し (ctrl+a)、Alt キーを押したまま卵をクリックします (Alt キーを押したまま卵をキー オブジェクトとして選択すると、卵の周囲に厚い選択領域が表示されます)。 [整列] パネルで水平方向と中央揃えにします。

ステップ 4:

このステップでは、ピンク色の線の形状を与えましょう。それを選択し、「エフェクト」->「ディストーション」->「エイリアス」に移動します。サイズを 5px に設定し、7 ポイントごとに尾根を作成し、ポイントを滑らかにします。

その後、「オブジェクト」→「展開」コマンドを実行すると、シェイプに効果を適用できます。

ステップ 5:

卵の底に別の長方形を追加し、緑色で塗りつぶします。次に、この長方形の卵の外側の部分を取り出してみましょう。 AI の新しいツールである平面ツール (shift+n) を使用します。

このツールを使用して、削除したい部分に描画するだけです。他の不要な領域でも同じ操作を繰り返します。

後で別の卵を作るときに不要な部分を取り除く別の方法を試してみます。

ステップ 6:

形をした卵を選択し、オブジェクト -> 展開を実行します。次に、卵の黄色の中央部分とピンクの波線の両方を選択し、パスファインダーでそれらを 2 つの別々の部分になるように分離します。

ステップ 7:

切り離したばかりの図形の上部を美しいピンク色で塗りつぶします。楕円ツール (L) を使用して、5X5px の円を作成します。 Alt+Shift キーを押したまま円を右にドラッグし、いくつかのコピーを作成します。

ステップ 8:

これで、卵の基本的な形ができました。卵の半分を覆うフラットスタイルの影を追加しましょう。卵のすべての部分をグループ化し (ctrl+g)、コピーして前面のレイヤーに貼り付けます (ctrl+c->ctrl+f)。コピーした部分を選択したまま、パスファインダーでマージコマンドを実行して、卵をキーオブジェクトにします。

この線と卵の輪郭を選択し、パスファインダーでそれらを分離します。

半分を削除し、残りの半分を乗算モードおよび半透明で表示します。

ステップ 9:

別の卵を作りましょう!

最初のステップでコピーを作成したので、すでに基本的な形状ができています (覚えていますか?)。それを横に移動(コピー)し、オレンジ色で塗りつぶします。その上に装飾要素を追加すると、別の見方が可能になります(不要な部分を非表示にします)。この基本タイプをもう一度コピーし (ctrl+c->ctrl+f)、一番上に移動します (shift+ctrl+]) (初心者はこれらの基本的なショートカット キーに慣れておくことをお勧めします ~ 翻訳者のヒント)。

すべての要素を選択し、右クリックしてクリッピングマスクを追加します!このステップはあなたに任せます!

ステップ 10:

この卵にさらに装飾要素を追加してみましょう!卵の黄色のストライプ上に 5x5px の円を 2 つ作成し、それらを黄色のストライプの端に移動します。両方の円を選択し、ブレンド ツール (M) または [オブジェクト] -> [ブレンド] -> [作成] コマンド (いずれかを選択) を実行します。次に、[ブレンド オプション] ウィンドウ ([オブジェクト] -> [ブレンド] -> [ブレンド オプション]) を開き、指定したステップ間隔の値を 3 に設定します。

オブジェクト→拡張コマンドがこのブレンドグループに適用されます。次に、卵の上にさらに丸いものを追加し、黄色で満たします。

ステップ 11:

結果に満足したら、卵の半分に半透明のフラットシャドウを追加します。

卵を混ぜます。角丸長方形ツールを使用して、アイコンの背景を明るい緑色にします。

長方形ツール(M)で正方形を作成し、Shiftキーを押しながら選択ツール(V)を使用して正方形を45度回転させます。

明るい緑から白への線形グラデーションを追加して長方形を塗りつぶし、オーバーレイ モードを乗算ブレンド モードに設定します (つまり、半透明の長い影を作成します)。

ステップ 12:

明るい緑色の背景を複製し、複製した 2 つの図形の間でドロップ シャドウを移動します。クリッピング マスクを使用して、長い影の不要な部分を非表示にします。

とても良いです!最初のアイコンが作成されました。次へ進みましょう!

(注意: チュートリアルはここにあります。まだ始めたばかりの友達にはとても役に立ちます。基本的な知識といくつかの実践的なスキルがたくさんあります。何かを得ることができることを願っています!)

かわいいウサギを作ろうアイコン

ステップ 1:

ウサギの頭に 70X70 ピクセルの灰色の円を作成します。ダイレクト選択ツール (A) を使用して、円の端のアンカー ポイントを少し下に移動して、頭をわずかに絞ります。

それでは、耳を作りましょう。楕円ツール (L) を使用して、15x50 ピクセルの楕円を作成します。アンカーポイントを少し上に移動して、耳の上部を広くします。このシェイプを選択し、[オブジェクト] -> [パス] -> [パスのオフセット] コマンドを実行し、オフセット値を -5px に設定し、残りのオプションはデフォルトのままにします。このようにして、耳の内側に小さな耳の形状を作成します。

ステップ 2:

耳の内側をピンク色で塗りつぶし、耳の 2 つの部分をグループ化して下に移動します (shift+ctrl+[)。回転ツール (R) をダブルクリックしてオプション ウィンドウを開き、回転角度の値を -20° に設定します。

ステップ 3:

ミラー ツール (O) を使用して水平オプションをミラーリングし、[コピー] をクリックして、頭の反対側の耳を取得します。 2 つの耳をグループ化し、ボード全体の中心に合わせて頭と位置合わせすることができます。

頭をもう少し平らにします。

ステップ 4:

楕円ツール (L) を使用して、白いハイライトと鼻を表す円が付いた光沢のある黒い目を作成します。カッター (C) ツールを使用して、鼻の両側のアンカー ポイントをクリックして、鼻を 2 つの半分に分割します。

ステップ 5:

上の部分を削除し、残った部分をかわいいうさぎの鼻にします。 X キーを押して、塗りつぶしの色とストロークの色を交換します。 ストロークを 2px に設定し、上部のコントロール パネルで幅を変更します。下のスクリーンショットに示すように、2 つの鼻を複製し、より細くて明るくしてウサギの口を形成します。

ステップ 6:

頭に小さなひげを追加してウサギの描きを完成させましょう!線分ツール () を使用して、9 ピクセルの塗りつぶしと 1 ポイントのストロークを持つ垂直線分を作成します。ひげを少し回転させて、ウサギの顔の側面に追加します。

ステップ 7:

ウサギの頭の半分にフラットな風の影を直接追加します (以前にすでに実行したように)。角丸長方形ツールを使用して背景と半透明の長い影を作成します。これでアイコンの描画が完了しました。

(チュートリアルはここで終了です。このチュートリアルでは、2 つのアイコンの描画スキルについて説明します。何かを得ることができれば幸いです。他の 2 つのアイコンの描画方法は、実際にはこれら 2 つと同じです。ほぼ同じです。他の 2 つについてリクエストがある場合は、メッセージを残してください。残りのチュートリアルの翻訳を続けます)

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles