브라우저에서 SVG 그래픽 디자인

Jan 28, 2026

어떻게

그만큼 vecteezy 편집자 브라우저에서 바로 실행되는 무료 벡터 편집 스위트입니다. 이 자습서에서는 사이트의 벡터를 편집하는 데 사용할 수있는 기본 모양 도구 및 편집 도구를 다룹니다. 이렇게하면 배지, 버튼, 로고 또는 상대적으로 쉽게 다른 것을 빌드 할 수 있습니다.

이 편집기의 GUI는 Adobe 소프트웨어와 유사한 느낌이므로 이미 Photoshop 또는 Illustrator를 사용하면 쉽게 로프를 배우십시오. 그러나 완전한 초보자 조차도이 문제로 뛰어 들고 처음부터 기초를 집어들 수 있습니다.

Adobe Creative Cloud를 얻으십시오

우리는 Vecteezy 에서이 쇼핑 아이콘을 사용할 것입니다.

아이콘 페이지를 방문하고 '편집 & amp]를 클릭하십시오. 다운로드 버튼. 그러면이 그래픽을 사용자 정의하고 빌드 할 수 있도록 브라우저에서 편집기 오른쪽을 엽니 다. 이 튜토리얼의 경우 이러한 아이콘 중 일부를 NAB를 뺀 다음 더 큰 진행률 막대 그래픽으로 변환하는 방법 - 전자 상거래 홈페이지에 대한 완벽한 선택을 보여줍니다.

따라서 Vecteezy 편집기에서 쇼핑 아이콘이 열려 있으므로 시작할 수 있습니다!

01. 아이콘을 선택하십시오

Click into the icon group and select one icon, then click Duplicate at the top — 아이콘 그룹을 클릭하고 하나의 아이콘을 선택한 다음 상단에서 복제를 클릭하십시오.

아이콘 그룹을 두 번 클릭하여 모든 아이콘을 선택하십시오 (두 번 클릭해야 할 수 있음). 나는이 튜토리얼에 대해 세 가지 아이콘을 사용할 것입니다 : 쇼핑백, 신용 카드 및 선물 상자.

쇼핑백을 선택하고 페이지 상단에서 복제를 클릭하십시오. 이것은 전체 아이콘을 복제해야합니다. 이것을 위로 이동하고 다른 두 가지를 복제하십시오.

참고 : 선물 상자가 완전히 그룹화되지 않으므로 복제하려면 클릭하면 아이콘을 선택하십시오. 이 문제를 해결하려면 선택 상자를 전체 선물 아이콘 위로 드래그 한 다음 맨 위로 클릭 편집 및 gt; 그룹에서. 이제 한 번의 클릭으로 전체 현재 아이콘을 복제 할 수 있습니다.

세 가지 아이콘이 모두 중복되면 빈 캔버스의 아무 곳이나 두 번 클릭하십시오. 이렇게하면 페이지에서 다른 개체를 선택할 수 있도록 아이콘 그룹 밖에서 가져옵니다. 이전 아이콘을 클릭하면 전체 그룹을 선택합니다. 이것은 캔버스에서 아래로 끌려고 드래그하기를 원할 것입니다. 그래서 그들은 시야가 없었기 때문입니다.

02. 쓰레기를 지우십시오

Change the background opacity if you want it to be white instead of transparent — 배경 불투명도를 바꾸면 투명한 대신 화이트가 되십시오.

각 복제 된 아이콘을 두 번 클릭하여 개별 모양에 액세스하십시오. 우리는 주요 아이콘 만 필요하므로 다채로운 원 배경을 선택하고 삭제하고 그림자를 삭제해야합니다.

이렇게하려면 매우 가까이 확대하고 배경 원을 선택하십시오. 그런 다음 삭제를 누르면 사라져야합니다.

전체 아이콘이 사라지면 - 패닉을하지 마십시오. 위쪽 근처에서 실행 취소를 클릭하거나 Ctrl / CMD + Z를 누르고 다시 시도하십시오. 아이콘 그룹 내부를 두 번 클릭하여 클릭해야 할 수도 있습니다.

마지막으로 3 개의 깨끗한 아이콘을 사용할 준비가되어 있어야합니다. 투명한 배경을 좋아하지 않으면 항상 왼쪽 메뉴 (세 번째 버튼 아래로)의 배경 패널에 액세스하고 순수한 흰색 배경의 경우 불투명도를 100 %로 늘릴 수 있습니다.

03. 텍스트 추가

Add text labels under each icon with the same font settings — 동일한 글꼴 설정이있는 각 아이콘 아래에 텍스트 레이블 추가

이 진행률 막대는 믿을 수 없을 정도로 간단합니다. 전자 상거래 가게의 3 단계를 광고하십시오.

이 프로세스를 강조하려면 각 아이콘 아래 레이블을 추가 해 봅시다. 왼쪽 도구 모음에서 텍스트 도구 (두 번째 버튼)를 찾은 다음 가방 아이콘 아래를 클릭하여 텍스트 블록을 추가합니다. 텍스트 'Shop'을 추가하고 키보드에 Enter를 누릅니다.

이 자동으로 텍스트를 선택하므로 이동하여 좋은 위치를 찾을 수 있습니다. 그러나 텍스트 도구를 다시 선택하면 글꼴 패밀리, 색상, 크기, 문자 간격 및 기타 기능을 변경할 수 있습니다.

-1.50 문자 간격으로 열린 SAN Semi-Bold 크기 30을 사용하고 있습니다. 텍스트 색상은 # 525252입니다.

이 텍스트를 두 번 복제하고 다른 아이콘 아래에 복제본을 놓습니다. 선물 상자 아래에 신용 카드 아이콘 아래의 '지불'텍스트를 사용하십시오.

선택 도구를 사용하여 텍스트 위의 아이콘을 재배치해야합니다. 또한 가능한 경우 각 아이콘이 등거리에 가깝게 닫습니다.

04. 그래픽 조정

Shift+click to select the ribbon shapes and change the background colour — Shift + 클릭하여 리본 모양을 선택하고 배경색을 변경하십시오.

진행률 표시 줄을 만들기 전에 아이콘에서 원하는 색상을 변경할 수 있습니다.

이렇게하려면 아이콘 그룹을 입력하려면 두 번 클릭하여 변경하려는 모양을 선택하십시오. 이 경우 선물 상자 리본을 편집하여 파란색에서 녹색으로 색상을 변경합니다.

아이콘 그룹 안에 있으면 한 번에 둘 이상의 항목을 선택한 상태에서 Shift 키를 누르고 있습니다. 나는 수평 및 수직 직사각형을 선택하며, 맨 위에있는 보우 모양을 선택하겠습니다.

선택 패널 (왼쪽 메뉴의 첫 번째 아이콘)에서 채우기 설정을 찾습니다. 기본 색상이 # 2E3192 인 것을 볼 수 있습니다. 해당 채우기 메뉴를 클릭하여 드롭 다운 컬러 휠에 액세스하십시오. 여기에서 주위를 끌어서 원하는 색을 찾거나 Hex 코드를 직접 입력 할 수 있습니다.

# 518531을 입력하고 Enter를 누르십시오. 결과를 저장하고 모든 세 모양을 한 번에 업데이트해야합니다. 변경하려는 다른 색상 설정으로 언제든지 재생하십시오!

05. 진행률 막대를 시작합니다

Click the top-left circle in the Elements panel to add a new circle to the canvas — 요소 패널에서 왼쪽 상단 원을 클릭하여 캔버스에 새 원을 추가합니다.

진행률 표시 줄을 만들려면 원과 직사각형 두 모양 만 필요합니다. 고맙게도 모두 도구 메뉴의 맨 아래에있는 요소 패널에서 사용할 수 있습니다.

요소 패널을 클릭하고 목록의 첫 번째 항목 인 원 모양을 선택합니다. 작업 공간의 중앙에 어두운 회색 원을 자동으로 배치 할 것입니다.

코너의 작은 흰색 정사각형 상자 또는 선택 경계를 드래그하여 원을 조정할 수 있습니다. 이것은 잘 작동하지만 직접 크기 조정 기능만큼 정확하지는 않습니다.

따라서 대신 선택 도구로 돌아가서 새 원이 선택되어 있는지 확인하십시오. 선택 도구 패널의 맨 위에는 높이와 너비 값으로 선택 크기가 표시되어야합니다.

두 필드에 100을 입력하고 첫 번째 아이콘 아래에서 첫 번째 원을 드래그하십시오.

06. 서클 복제

Resize the circle and duplicate twice, then move them under each shopping icon — 원형을 조정하고 두 번 복제 한 다음 각 쇼핑 아이콘 아래로 이동하십시오.

원형 모양을 선택한 상태에서 맨 위 메뉴에서 복제를 클릭하십시오. 이제이 복제본을 재배치하므로 원래 원과 밀접하게 정렬됩니다. 첫 번째 서클 위에 올려 놓으려면 한 모양처럼 보입니다.

이제 Shift를 누른 상태 에서이 중복 원을 직선으로 수평으로 끌 수 있습니다. 이를 통해 모든 원을 직선으로 완벽하게 정렬 할 수 있습니다 (또는 하나에 충분히 가깝게).

100 x 100에 3 개의 다른 원형 모양이있을 때 까지이 작업을 수행하면 각각 3 개의 아이콘 아래에 배치됩니다.

07. 일부 연결 라인을 추가하십시오

Select the rectangle shape and arrange it behind the three circles — 사각형 모양을 선택하고 3 개의 원 뒤에 배열하십시오.

요소 패널로 다시 이동하고 사각형 모양을 찾습니다. 캔버스에 하나의 사각형을 추가하려면 클릭하십시오.

이 모양을 선택하면 선택 도구로 돌아가서 너비 / 높이 크기 패널을 찾습니다. 이 직사각형은 진행률 표시 줄의 전체 폭을 확장해야하므로 정말로 긴 모양이 필요합니다. 따라서 모든 서클을 함께 연결하는 데 필요한 모든 번호로 높이를 10으로 변경하십시오. 광산은 750입니다.

이제이 직사각형을 제 위치에 있으면 선택 패널의 맨 앤 앰프의 맨 & amp; 튀기다. 상단 행에서 두 번째 아이콘을 클릭하면 다른 모양 뒤에서 선택한 모양을 이동할 수 있습니다.

참고 : 세 개의 모든 원 뒤에 직사각형을 가져 오려면 하단 버튼을 몇 번 클릭해야 할 수 있습니다. 그러나 이제는 연결 사각형이 원 모양 사이에만 표시되므로 나중에 원에 텍스트를 추가 할 수 있습니다.

08. recolouring

Recolour all the shapes and include a small stroke on the three circles — 모든 모양을 recolour하고 세 서클에 작은 뇌졸중을 포함시킵니다.

현재 진행률 표시 줄은 조금 어둡게 보입니다. 그래서 색상을 조금 변경하십시오.

긴 사각형을 선택하고 도구 패널에서 채우기 설정을 찾으려면 클릭하십시오. 색상을 # C5C5C5로 변경하고 Enter 키를 누릅니다.

이제 직사각형을 선택 취소하려면 어디서나 캔버스 오프를 클릭하십시오. 우리는 또한 원형 색을 바꾸고, 어두운 회색을 경계 색으로 사용하여 더 가벼워야합니다.

Shift를 잡고 3 개의 서클 각각을 클릭하십시오. 채우기 색상을 # F5F5F5로 조정하고 Enter 키를 누른 다음 X 아이콘을 클릭하여 채우기 색상 선택 패널을 닫습니다. 아래에서 스트로크 설정을 찾을 수 있습니다. 스트로크 채우기를 # C5C5C5로 변경하고 Enter를 누르십시오.

X 아이콘을 클릭 하여이 색상 선택 패널을 닫은 다음 스트로크 크기를 6으로 변경하십시오.이 단계에서 선택 상자를 드래그하여 모든 원과 사각형을 그룹화하고 편집 할 수 있습니다. 그룹. 이제 모든 모양의 위치를 쉽게 쉽게 조정할 수 있습니다.

09. 진행 단계를 추가합니다

Add a text label into the first circle and duplicate the text for all three shapes — 텍스트 레이블을 첫 번째 원에 추가하고 세 모양 모두에 대한 텍스트를 복제합니다.

진행률 막대 디자인을 마무리하려면 각 원에 숫자를 추가합시다.

텍스트 도구를 클릭하고 첫 번째 원에 번호 1을 입력하십시오. 나는 국경과 일치하는 색상 # C5C5C5가있는 열린 SAN을 사용하여 굵게 굵게 사용하고 크기 45를 사용하고 있습니다. 이 텍스트를 드래그하여 원의 중앙에 위치합니다.

텍스트 요소를 복제하고 텍스트 '2'텍스트가있는 두 번째 원으로 이동하십시오. 텍스트 '3'으로 세 번째 원에 대해 동일하게하십시오.

10. 첫 번째 단계를 강조 표시하십시오

Recolour the first circle blue so it appears like the active progress step — 첫 번째 원 파란색을 recolour로 활성 진행 단계처럼 보입니다.

마무리 터치로서, 가벼운 파란색 개요를 사용하여 첫 번째 단계를 강조 표시하겠습니다. 먼저 방금 작성한 번호 '1'을 선택하고 # 4976A3로 채우기를 변경하십시오. 그런 다음 클릭하여 텍스트 뒤의 원을 선택하십시오. 스트로크 설정을 찾아 스트로크 색상을 # 4976A3로 변경하십시오. 이것은 원 주위에 어두운 파란색 테두리를 추가해야합니다. 원이 여전히 선택된 상태에서 채우기 설정을 클릭하고 색상을 # E2EBFA로 변경하십시오.

그리고 그게 다야! 이제 오른쪽 상단 모서리의 다운로드 기능을 사용하여 PNG / JPG로 내보낼 수 있습니다. 또한 흰색 배경을 숨기려면이 파일을 투명한 PNG로 내보내고 배경 패널 (왼쪽 메뉴의 세 번째 버튼)을 사용하여 전체 문서 크기를 변경할 수도 있습니다.

또는 나중에 변경을 위해이를 저장하려면 파일 & gt; 나중에 저장하십시오. 무료 vecteezy 계정을 만들어야하지만 미래의 참조를 위해 당신의 열심히 저축 된 당신의 노력을 지키는 훌륭한 방법입니다.

이 기사는 원래 나타났습니다 그물 잡지 문제 295. 그것을 사십시오 여기 ...에

자세히보기 :

반응이 빠른 SVG를위한 10 개의 황금 규칙
SVG 2에서 흥미 진진한 새로운 기능을 탐색하십시오
GSAP로 SVG 애니메이션 과급하십시오

브라우저에서 SVG 그래픽 디자인

01. 아이콘을 선택하십시오

02. 쓰레기를 지우십시오

03. 텍스트 추가

04. 그래픽 조정

05. 진행률 막대를 시작합니다

06. 서클 복제

07. 일부 연결 라인을 추가하십시오

08. recolouring

09. 진행 단계를 추가합니다

10. 첫 번째 단계를 강조 표시하십시오

어떻게 - 가장 인기있는 기사

당신의 삶의 도면에 에너지를 추가하는 방법

일러스트 레이터에서 앱 아이콘을 만드는 방법

빛나는 네온 텍스트 효과를 만듭니다

녹을 시작

chatbot 인터페이스를 만드는 방법

V-RAY로 거대한 폭발을하는 방법

Angular 4의 새로운 기능은 무엇입니까?

게임 플레이 디자인을위한 우주선 모델링

카테고리