Tarayıcınızda Tasarım SVG Grafikleri

Feb 2, 2026

Nasıl Yapılır

Vecteezy Editor Tarayıcınızda doğru çalışan ücretsiz bir vektör düzenleme süitidir. Bu öğretici, sitedeki vektörleri düzenlemek için kullanabileceğiniz temel şekil araçlarını ve düzenleme araçlarını kapsar. Bu şekilde rozetler, düğmeler, logolar veya göreceli kolaylıkta başka bir şey yapabilirsiniz.

Bu editör için GUI, Adobe yazılımına benzer, bu nedenle zaten Photoshop veya Illustrator kullanıyorsanız, halatları öğrenmek daha kolay bir zaman geçirirsiniz. Ancak yeni başlayanlar bile buna dalabilir ve temelleri sıfırdan çıkarabilir.

Adobe Creative Cloud Get

Bu alışveriş simgelerini Vecteezy'den kullanacağız.

Sadece simgeler sayfasını ziyaret edin ve 'Düzenle ve Amp; İndirin 'düğmesini. Bu, bu grafikleri özelleştirip geliştirebilirsiniz, bu, tarayıcınızda düzenleyiciyi açar. Bu eğitim için, size bu simgelerin bir kısmını nasıl nabladığını ve onları daha büyük bir ilerleme çubuğuna dönüştürmeyi göstereceğiz - herhangi bir e-ticaret ana sayfası için mükemmel bir seçim.

Yani Vecteezy Editor'da bu alışveriş simgeleri ile başlayabiliriz!

01. Simgeleri seçin

Click into the icon group and select one icon, then click Duplicate at the top — Simge grubuna tıklayın ve bir simge seçin, ardından Üstte Çoğalt'ı tıklatın.

Tüm simgeleri seçmek için simge grubuna çift tıklayın (iki kez çift tıklamanız gerekebilir). Bu öğretici için üç özel simge kullanacağım: alışveriş torbaları, kredi kartı ve hediye kutusu.

Alışveriş çantasını seçin ve sayfanın en üstünde Çoğalt'ı tıklatın. Bu size tüm simgenin bir kopyasını vermelidir. Bunu üste doğru hareket ettirin ve diğer ikisini çoğaltın.

Not: Hediye kutusu tam olarak gruplandırılmamıştır, bu nedenle çoğaltmak için tıkladığınızda yalnızca simgenin bir parçasını seçin. Bunu düzeltmek için, sadece bir seçim kutusunu tüm hediye simgesinin üzerine sürükleyin, ardından baş üstüne tıklayın ve GT; Grup. Şimdi, tek bir tıklamayla tüm mevcut simgeyi çoğaltabilirsiniz.

Her üç simgenin de çoğaltıldıktan sonra, boş tuvalde herhangi bir yere çift tıklayın. Bu sizi simge grubunun dışına getirir, böylece sayfadaki diğer nesneleri seçebilirsiniz. Eski simgelerden herhangi birine tıklarsanız, tüm grubu seçersiniz. Bu mükemmel, çünkü onları tuvalden aşağı sürüklemek istersiniz, bu yüzden görüş alanı dışında.

02. Çöpleri temizleyin

Change the background opacity if you want it to be white instead of transparent — Şeffaf yerine beyaz olmasını istiyorsanız arka plan opaklığını değiştirin

İçindeki bireysel şekillere erişmek için her çoğaltılmış simgeye çift tıklayın. Sadece ana simgeye ihtiyacımız var, bu yüzden renkli daire arka planlarını seçmeli ve silmelisiniz.

Bunu yapmak için, çok yakınlaştırın ve arka plan dairesini seçin. Ardından Sil tuşuna basın ve kaybolmalıdır.

Tüm simge kaybolursa - panik yapmayın. Sadece Üstün yakınındaki Geri Al'ı tıklatın veya CTRL / CMD + Z tuşlarına basın ve tekrar deneyin. Simge grubunun içine girmek için çift tıklamanız gerekebilir.

Sonunda, üç temiz simgenin kullanıma hazır olmalısınız. Şeffaf arka plandan hoşlanmıyorsanız, Sol menüsündeki arka plan paneline her zaman erişebilir (üçüncü düğme aşağı) ve saf beyaz bir arka plan için opaklığı yüzde 100'e yükseltebilirsiniz.

03. Metin ekleme

Add text labels under each icon with the same font settings — Aynı yazı tipi ayarlarıyla her simge altında metin etiketleri ekleyin

Bu ilerleme çubuğu inanılmaz derecede basit olacak; Sadece bir e-ticaret mağazasının üç aşamasını ilan edin.

Bu işlemi vurgulamak için, her simgenin altına etiket ekleyelim. Sol el araç çubuğunda, metin aracını (ikinci düğmeyi) bulun ve ardından bir metin bloğu eklemek için çanta simgesinin altına tıklayın. 'MAĞAZA' metin ekleyin ve klavyenize girin.

Bu, metni otomatik olarak seçer, böylece etrafta hareket edebilir ve iyi bir konum bulabilirsiniz. Ancak, metin aracını tekrar seçerseniz, yazı tipi ailesini, rengi, boyutu, harf boşluğunu ve diğer özellikleri değiştirebilirsiniz.

-1.50 harfli bir aralıkla açık SANS yarı kalın boyutlu 30 kullanıyorum. Metin rengi # 525252.

Bu metni iki kez çoğaltın ve kopyaları diğer simgelerin altına yerleştirin. Kredi kartı simgesinin altındaki 'Ödeme' metnini kullanın ve hediye kutusunun altındaki 'al ".

Simgeleri metnin üstündeki yeniden konumlandırma için Seçme aracını kullanmalısınız. Ayrıca, mümkünse her simge her simge ekine yakındır.

04. Grafiklerin Ayarlanması

Shift+click to select the ribbon shapes and change the background colour — Shift + Şerit şekillerini seçmek için tıklayın ve arka plan rengini değiştirin

İlerleme çubuğunu oluşturmadan önce, simgelerde istediğiniz renkleri değiştirebilirsiniz.

Bunu yapmak için, herhangi bir simge grubuna girmek için çift tıklayın, ardından değiştirmek istediğiniz şekli seçin. Bu durumda, rengi maviden yeşile değiştirmek için hediye kutusu şeritini düzenleyeceğim.

Simge grubunun içinde olduğunuzda, bir seferde birden fazla öğe seçmek için tıklarken vardiyayı tutun. Yatay ve dikey dikdörtgenleri ve üstteki yay şeklini seçeceğim.

Seçme panelinde (sol menüdeki ilk simge) Dolgu ayarlarını bulun. Varsayılan renge # 2E3192 olduğunu göreceksiniz. Bir açılır renk tekerleğine erişmek için bu Dolum menüsünü tıklayın. Burada, istediğiniz rengi bulmak için etrafa sürükleyebilirsiniz veya doğrudan bir hex kodu girebilirsiniz.

# 518531 girin ve enter tuşuna basın. Bu, sonucu kaydetmeli ve her üç şekli bir kerede güncellemelidir. Değiştirmek istediğiniz diğer renk ayarları ile oynamaktan çekinmeyin!

05. İlerleme çubuğuna başlamak

Click the top-left circle in the Elements panel to add a new circle to the canvas — Tuval için yeni bir daire eklemek için Elements panelinde sol üst daireyi tıklayın.

Bir ilerleme çubuğu oluşturmak için, sadece iki şekle ihtiyacınız var: daireler ve dikdörtgenler. Neyse ki, bunların her ikisi de, Araçlar menüsünün altındaki elementler panelinde mevcuttur.

Elements panelini tıklatın ve listedeki ilk öğe olan daire şeklini seçin. Çalışma alanınızın ortasına otomatik olarak koyu gri bir daire yerleştirecektir.

Köşedeki küçük beyaz kare kutuları veya seçim sınırındaki küçük beyaz kare kutuları sürükleyerek daireyi yeniden boyutlandırabilirsiniz. Bu iyi çalışıyor, ancak doğrudan yeniden boyutlandırma özelliği kadar kesin değil.

Yani bunun yerine, Seçim aracına geri dönün ve yeni dairenizin seçildiğinden emin olun. Seçim Takım panelinin en üstünde, yükseklik ve genişlik değeri olan bir seçim boyutu görmelisiniz.

Her iki alanda da 100 girin ve ilk dairenizi ilk simge altında sürükleyin.

06. Kopyalama halkaları

Resize the circle and duplicate twice, then move them under each shopping icon — Daireyi yeniden boyutlandırın ve iki kez çoğaltın, sonra her alışveriş simgesinin altına taşıyın

Circle şekliniz seçiliyken, üst menüde Çoğalt'ı tıklatın. Şimdi, bu çoğaltmayı yeniden konumlandırın, böylece orijinal dairenizle yakından hizalanır. İlk dairenin üstüne doğru almaya çalışın, böylece tek bir şekil gibi görünüyorlar.

Şimdi, vardiya ve tıklatırsanız, bu yinelenen daireyi yatay olarak düz bir çizgide sürükleyebilirsiniz. Bu, tüm dairelerinizi düz bir çizgide (veya birine yeterince yakın) mükemmel bir şekilde hizalamanızı sağlar.

Bunu, her biri üç simgenin altına yerleştirilen 100 x 100'te üç farklı daire şekline sahip olana kadar yapın.

07. Bazı bağlantı hatları ekleyin

Select the rectangle shape and arrange it behind the three circles — Dikdörtgen şeklini seçin ve üç dairenin arkasında düzenleyin

Elementler paneline geri dönün ve kare şeklini bulun. Tuval üzerine bir kare eklemek için tıklayın.

Bu şekil seçiliyken, Seçim aracına geri dönün ve genişlik / yükseklik boyutu panelini bulun. Bu dikdörtgen ilerleme çubuğunun tüm genişliğine geçmesi gerektiğinden, sadece gerçekten uzun bir şekle ihtiyacımız var. Bu nedenle, yüksekliği 10'a ve tüm çevrelerinizi bir araya getirmeniz gereken numaraya kadar olanı değiştirin. Maden 750 genişliğindedir.

Şimdi, bu dikdörtgenin konumunda, düzenle ve amp diğeri seçme panelinin altına bakın; Çevir. Seçilen şekli diğer şekillerin arkasında hareket ettirmenizi sağlayan üst satırdaki ikinci simgeye tıklayın.

Not: Dikdörtgeni her üç dairenin arkasına almak için düşük düğmeyi birkaç kez tıklatmanız gerekebilir. Ancak şimdi bağlantı dikdörtgen sadece daire şekilleri arasında görülebilir, böylece daha sonra dairelere metin ekleyebiliriz.

08. RECOLOURING

Recolour all the shapes and include a small stroke on the three circles — Tüm şekilleri yeniden bağlar ve üç dairede küçük bir vuruş ekleyin

Mevcut ilerleme çubuğu biraz karanlık görünüyor, bu yüzden rengi biraz değiştirelim.

Uzun dikdörtgeni seçmek için tıklayın ve Araçlar panelindeki Dolum ayarlarını bulun. Rengi # C5C5C5'e değiştirin ve Enter tuşuna basın.

Şimdi, dikdörtgenin seçimini kaldırmak için herhangi bir yere tıklayın. Ayrıca daire renklerini değiştirmek istiyoruz ve daha koyu gri'yi sınır rengi olarak kullanarak daha hafif olmalıdır.

Vardiya tutun ve üç dairenin her birine tıklayın. Dolgu rengini # F5F5F5'e ayarlayın, ENTER tuşuna basın ve ardından Dolgu rengi seçim panelini kapatmak için X simgesine tıklayın. Aşağıda, kontur ayarlarını bulacaksınız. Stroke Doldurmayı # C5C5C5'e değiştirin ve Enter tuşuna basın.

Bu renk seçim panelini kapatmak için x simgesine tıklayın, ardından inme boyutunu 6 olarak değiştirin. Bu aşamada, bir seçim kutusunu sürükleyerek ve düzenleyerek GT; Grup'u sürükleyerek tüm daireleri ve dikdörtgenleri birleştirmeyi de öneririm. Şimdi, tüm şekillerin konumunu bir kerede kolaylıkla ayarlayabilirsiniz.

09. İlerleme Adımları Ekleme

Add a text label into the first circle and duplicate the text for all three shapes — İlk daireye bir metin etiketi ekleyin ve tüm üç şekil için metni çoğaltın

İlerleme çubuğu tasarımını sonlandırmak için her daireye bazı numaralar ekleyelim.

Metin aracını tıklayın ve 1 numarayı ilk daireye girin. Sınırları eşleştirmek için açık SANS ekstra kalın, boyut (45). Bu metni sürükleyin, böylece dairenin ortasına yerleştirilmiş.

Metin öğesini çoğaltın ve '2' metni ile ikinci daireye taşıyın. "3 'metinli üçüncü çember için de aynısını yapın.

10. İlk adımı vurgulayın

Recolour the first circle blue so it appears like the active progress step — İlk çemberi mavi recolour, bu yüzden aktif ilerleme aşaması gibi görünüyor

Son bir dokunuş olarak, daha hafif bir mavi anahat kullanarak ilk adımı vurgulayalım. Öncelikle, oluşturduğunuz 1 'numarasını seçin ve Dolguyu # 4976A3'ü değiştirin. Ardından, metnin arkasındaki daireyi seçmek için tıklayın. Kontur ayarlarını bulun ve strok rengini # 4976A3 olarak değiştirin. Bu, dairenin etrafına koyu mavi bir sınır eklemelidir. Çember hala seçiliyken, Doldurma ayarlarını tıklatın ve rengi # E2EBFA'ya değiştirin.

Ve bu kadar! Artık bunu sağ üst köşedeki indirme özelliğini kullanarak bir PNG / JPG olarak dışa aktarabilirsiniz. Bunu, bunu şeffaf bir PNG olarak dışa aktarmak ve arka plan panelini (sol taraftaki menüdeki üçüncü düğme) kullanarak genel belge boyutunu değiştirmesi için beyaz arka planı da gizleyebilirsiniz.

Ya da bunu gelecekteki değişiklikler için kaydetmek istiyorsanız, sadece Dosya ve GT'ye gidin; daha sonra tasarruf edin. ÜCRETSİZ Vecteezy Hesap Oluşturmanız Gerekenler, ancak zor işinizi gelecekteki referans için tasarruf etmeniz için harika bir yoldur.

Bu makale başlangıçta ortaya çıktı net dergisi Sayı 295. satın al İşte .

Daha fazla oku:

Duyarlı SVGS için 10 Altın Kural
SVG 2'de heyecan verici yeni özellikleri keşfedin
GSAP ile SOFTACK SVG Animasyonları

Tarayıcınızda Tasarım SVG Grafikleri

01. Simgeleri seçin

02. Çöpleri temizleyin

03. Metin ekleme

04. Grafiklerin Ayarlanması

05. İlerleme çubuğuna başlamak

06. Kopyalama halkaları

07. Bazı bağlantı hatları ekleyin

08. RECOLOURING

09. İlerleme Adımları Ekleme

10. İlk adımı vurgulayın

Nasıl Yapılır - En Popüler Makaleler

Yaşam çizimlerinize enerji nasıl eklenir

Zbrush UI'nizle Akıllı Çalışma

Yapıtınızı nasıl monte edilir

Afinite Tasarımcısı ile Retro Logo Nasıl Oluşturulur

Geleneksel bir İngiliz köyünü nasıl boyanır

Sinema 4d'de gerçekçi bitkiler yapmak

Artrage'da özel bir etiket fırçası oluşturun

Şekillendirilmiş ve boyanmış yer değiştirme haritaları nasıl birleştirilir

Kategoriler