どのように私は私のサイトのSVGのロゴを作った
こんにちは
私の名前はArtemシャー(Sharyukov)です、私は2016年以降ウェブ/fron終わり開発者です.2019年の終わりにはいつものようなブログで新しい個人的なウェブサイトを作る時間だと決めました.新しいサイトはまだ準備ができていない.しかし、プロセスをより面白く、より速くするために、私はこの作品が本当に行われたので、私のロゴ作成の経験を共有したい.閉じるこの動画はお気に入りから削除されています.
このロゴは、SVGとCSSを使用しないツールです.
<div class="logo-wrap">
<svg class="logo-svg" viewBox="0 0 200 200" width="50px" height="50px">
<circle cx="100" cy="100" r="100" fill="#313131"></circle>
<circle cx="100" cy="100" r="75" fill="#ccc"></circle>
<circle cx="100" cy="100" r="50" fill="#fff"></circle>
</svg>
</div>
.logo-wrap {
--color-glow-1: #080808;
--color-glow-2: #D9FBFF;
...
}
.logo-wrap:after {
...
box-shadow: 8px 10px 30px var(--color-glow-1), 5px 5px 20px var(--color-glow-2);
}
.logo-wrap:before {
...
box-shadow: 8px 7px 20px var(--color-glow-1), 7px 7px 15px var(--color-glow-2);
}
いくつかの対話的な振る舞いを追加したり、色を変えたり、影などでプレイしたりしたいなら、それは簡単で、制御されます.
テープを少し巻き戻します.このバージョンの前に、私は何か似ているが、影なし.CSSコードを削除すると、このようになります.私はしばらくの間、このロゴで生活していました.そして、私はそれを削除したくなかった.
さあ、テープを最初に巻き直しましょう.
ファーストステップ
最初に始めたのは簡単なペンと紙だった.なぜなら、私はデジタルツールに制限されたくなかったからです.そして、私はちょうど1週間の間、実験しました.私に最初に起こったことは、私の最初と姓の手紙で遊ぶことでした.また、私はZeit companyデザインに触発されました.彼らのスタイルは、シンプルで強い明確です.しかし、私はあまり強くないか鋭い何かを作成したくありませんでした.何度もトライアングルを使おうとしました.私は、私の性格を含む何かについて考えました:自然、永遠に好きなもの、多分ルーツ.それは太陽、海、私はGulf of Finland、日の出と日没と何か控えめな、明確な、暗黒の近くで育ったので.また、私は友人に手紙AとSで考えを手伝ってくれるように頼みました、そして、彼女は何かを投げました.それが出てきた.質の悪いことを残念.
アプリケーションの反応
次のステージ242479152 -ベクトルグラフィックスを作成するための良い無料ツールを取った.そして、私はペンで描いたものを繰り返すようになりました.
Inkscape
そして、彼らはとても悪く見えました..それから、私はツールの特徴を使用しようとするべきだと気付きました.結局、ペンも多少制限されたツールです.それは簡単ではありませんでした、私はフォント、形と影のまわりで遊び始めました、一般に、それはdilatantに見えます、しかし、私は彼らのいくつかが好きでした.
ここでは、私の「太陽円」の最初のバージョンを見ることができます.
私は、Inkskapeでいろいろな変形をしました.はっきりしたファイル名を作ってください
それに決めた.私は本当にこの半透明のガラスが好きでした.
しばらくして、私はそれのように立ち止まりました.私はサークルに戻ります.私はちょうど2つの色を選ぶことができなかったので、私は私のページのアニメーション色をしました.
私がした次のこと、私はこれらの円をサイトの上でテーマスイッチに変えました.
最近、私は再び遊んでいたことを再度気づいた、私はこのすべてで立ち往生し、私は私の目標に移動していない-単純な、静的なサイトを作成します.テーマスイッチャーでこのプロジェクトを中止しました.私はHTML、CSSと私は手で現在のSVGのロゴを作った.そして、私はこの単純でボリューム結果で満足です.
多分、私は後で影で面白い何かをします、しかし、それは重要でありません.
私は私のサイトを続けます、そして、次のステップはブログパーツです.
結論
<div class="logo-wrap">
<svg class="logo-svg" viewBox="0 0 200 200" width="50px" height="50px">
<circle cx="100" cy="100" r="100" fill="#313131"></circle>
<circle cx="100" cy="100" r="75" fill="#ccc"></circle>
<circle cx="100" cy="100" r="50" fill="#fff"></circle>
</svg>
</div>
.logo-wrap {
--color-glow-1: #080808;
--color-glow-2: #D9FBFF;
...
}
.logo-wrap:after {
...
box-shadow: 8px 10px 30px var(--color-glow-1), 5px 5px 20px var(--color-glow-2);
}
.logo-wrap:before {
...
box-shadow: 8px 7px 20px var(--color-glow-1), 7px 7px 15px var(--color-glow-2);
}
あなたの注意をありがとう!良いコーディングとデザインを!
Reference
この問題について(どのように私は私のサイトのSVGのロゴを作った), 我々は、より多くの情報をここで見つけました https://dev.to/artem/how-i-made-my-svg-logo-4214テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol