내 사이트에 SVG 로고를 만든 방법
안녕하십니까
제 이름은 Artem Shar(Sharyukov)입니다. 저는 2016년부터 웹/프론트 엔드 개발자로 일하고 있습니다. 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 코드를 제거하면 다음과 같이 표시됩니다. 한동안 이 로고와 함께 살면서 일부 소셜 네트워크의 아바타에 넣었습니다. 그리고 삭제하고 싶지 않았습니다.

이제 테이프를 4개월 전(2019년 10월) 처음으로 되감아 보겠습니다.
첫 번째 단계
내가 처음 시작한 것은 간단한 펜과 종이였습니다. 어떤 디지털 도구에도 국한되고 싶지 않았기 때문입니다. 그리고 나는 약 일주일 동안 실험했습니다. 나에게 일어난 첫 번째 일은 내 이름과 성의 글자를 가지고 노는 것이었다. 또한 Zeit company 디자인에서 영감을 받았습니다. 그들의 스타일은 명확하고 단순하며 강합니다. 하지만 너무 강하거나 날카로운 것을 만들고 싶지는 않았습니다. 삼각형을 사용하려고 여러 번 시도했지만 결국 떨어뜨렸습니다. 나는 내 성격을 담고 있는 무언가, 즉 자연, 영원히 좋아하는 것, 아마도 뿌리에 대해 생각했습니다. 내가 근처에서 자랐기 때문에 태양, 바다였습니다 Gulf of Finland , 일출과 일몰, 그리고 겸손하고 맑고 어두운 것. 그리고 친구에게 A와 S로 아이디어를 도와달라는 편지를 썼더니 친구가 무언가를 던졌습니다. 그것이 나온 것입니다. 품질이 좋지 않아 죄송합니다.

Inkscape SVG + 반응 앱
내가 취한 다음 단계Inkscape - 벡터 그래픽을 만들기 위한 좋은 무료 도구입니다. 그리고 펜으로 그린 것을 반복하기 시작했습니다.

그리고 그들은 너무 나빠 보였습니다... 그제서야 도구의 기능을 사용하려고 노력해야 한다는 것을 깨달았습니다. 결국 펜은 다소 제한된 도구이기도 합니다. 쉽지 않았습니다. 글꼴, 양식 및 그림자를 가지고 놀기 시작했습니다. 일반적으로 팽창해 보이지만 그중 일부는 마음에 들었습니다. 여기에 몇 가지 좋은 예가 있습니다.
여기에서 내 "태양 원"의 첫 번째 버전을 볼 수 있습니다 :)

나는 Inkskape에서 많은 변형을 만들었습니다. 명확한 파일 이름을 만드십시오 - 아니요, 불가능합니다 :D

그리고 나는 그것에 정착했습니다. 나는이 반투명 유리를 사이트에 삽입했을 때 연주했던 색상이 정말 마음에 들었습니다.

시간이 지나면 불안정함과 불확실성을 느끼기 때문에 그대로 멈췄습니다. 서클로 돌아왔습니다. 두 가지 색상만 선택할 수 없었기 때문에 페이지에 애니메이션 색상을 적용했습니다.

그 다음으로 저는 이 원을 사이트에서 일몰이나 일출과 같은 테마 스위치로 전환했습니다.

최근에 나는 내가 너무 많이 플레이하고 있고, 이 모든 것에 갇혀 있고 단순하고 정적인 사이트를 만드는 내 목표로 움직이지 않는다는 것을 다시 깨달았습니다. 테마 스위처가 포함된 이 프로젝트는 내가 복잡하게 만들어서 중단되었습니다. 나는 HTML, CSS를 가져 와서 현재 SVG 로고를 손으로 만들었습니다. 그리고 저는 이 간단하고 방대한 결과에 만족합니다.

나중에 그림자로 흥미로운 작업을 할 수도 있지만 덜 중요합니다.
나는 내 사이트를 계속합니다. 다음 단계는 블로그 부분입니다. 시작을 위해 이 기사와 smth를 넣을 것입니다.
결론
<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.)