Affinity Designer'da Düz Vektör Çizim Nasıl Oluşturulur

( Bu sponsorlu bir gönderidir .) Tasarım dünyasındaysanız, Apple'ın macOS ve Microsoft Windows'u için bir vektör grafik editörü olan Affinity Designer'ı zaten duymuşsunuzdur.

Temmuz 2015'te Serif Europe, benim gibi birçok tasarımcı ve illüstratörün profesyonel iş için ana araç olarak kullandığı harika yazılımı piyasaya sürdü. Diğer bazı paketlerin aksine fiyatı gerçekten uygun, abonelik modeli yok ve daha önce de belirtildiği gibi hem Mac'ler hem de PC'ler için mevcut.

Bu makalede, yazılıma bir giriş olarak, çok kullanıcı dostu ana araçlarından ve özelliklerinden sadece bazılarında size yol göstermek ve bir Volkswagen Beetle'ın güzel bir düz vektör illüstrasyonunu nasıl oluşturabileceğimizi göstermek istiyorum. Çizim, herhangi bir bitmap kullanılmadığından, gereken çözünürlük ve boyuta kadar ölçeklenecektir.

Not : Bugün, 11 Temmuz itibariyle, Affinity Designer iPad için de mevcuttur. iPad uygulamasının özellikleri ve işlevleri, Affinity Designer'ın masaüstü sürümüyle neredeyse tamamen eşleşse de, daha çok dokunmatik ekranı (ve Apple Pencil'ı) kullanmaya dayanır ve bu nedenle, iş akışlarında bazı farklılıklar bulmayı bekleyebilirsiniz.

Çalışırken aldığım bazı kararları ve izlediğim yöntemleri de açıklayacağım. "Bütün yollar Roma'ya çıkar" eski deyişi biliyor musunuz? Bu durumda, birçok yol bizi varmak istediğimiz yere götürecektir, ancak bazıları diğerlerinden daha iyidir.

Ana araba taslağını izlemek için Kalem aracıyla nasıl çalışılacağını, eğrilerin ve bölümlerin nasıl kırılacağını, nesnelerin nasıl eğrilere dönüştürüleceğini ve harika Köşe aracının nasıl kullanılacağını göreceğiz. Ayrıca, diğer şeylerin yanı sıra Degrade aracının nasıl kullanılacağını, “Akıllı kopya”nın ne olduğunu, resmimiz için referans olarak kullanabileceğimiz bir görüntüden renk paletinin nasıl içe aktarılacağını, maskelerin nasıl kullanılacağını ve yarım ton deseni nasıl oluşturulur. Elbette, bu arada bazı yararlı klavye kısayollarını ve komutlarını da öğreneceksiniz.

Not: Affinity Designer'ın "kişiler" olarak adlandırılan üç çalışma ortamı vardır. Varsayılan olarak, Yakın İlgi Alanı Tasarımcısı çizim kişisine ayarlanmıştır. Çizim kişiliğinden piksel kişiliğine veya dışa aktarma kişiliğine geçmek için ana pencerenin sol üst köşesinde bulunan üç simgeden birine tıklamanız gerekir. Vektörleri ve bitmapleri birleştirmeniz gerektiğinde, çizim kişiliğinde çalışmaya başlayabilir ve istediğiniz zaman piksel kişiliğine geçebilirsiniz.

Giriş: Düz Tasarım Çağı

Son yıllarda, tasarımda skeuomorfik temsil olarak bilinen şeyin aksine "düz tasarımın" yükselişini gördük.

Basitçe söylemek gerekirse, düz tasarım, skeuomorfik tasarımın kullanıcılarla iletişim kurmak için kullandığı metaforlardan kurtuluyor ve bu metaforları tasarımda, özellikle de kullanıcı arayüzü tasarımında yıllardır görüyoruz. Apple, ilk iOS ve uygulama tasarımlarında en iyi skeuomorfizm örneklerinden bazılarına sahipti ve bugün müzik yazılımı ve video oyunları gibi birçok endüstride yaygın olarak kullanılıyor. Microsoft'un (Metro ile) ve daha sonra Google'ın malzeme tasarımı ve Apple'ın iOS 7'si ile mobil uygulamalar, kullanıcı arayüzleri ve çoğu sistem ve işletim sistemi, onu veya öğelerini yeni bir tasarım diline (gradyanlar dahil) yalnızca geliştirmeler olarak kullanarak skeuomorfizmden uzaklaştı. ve gölgeler). Tahmin edebileceğiniz gibi, bu sistemler üzerindeki illüstrasyonlar da yeni tasarım akımlarından etkilenmiş, illüstratörler ve tasarımcılar yeni zamana ve ihtiyaçlara uygun eserler yaratmaya başlamışlardır. Düz simgeler, düz infografikler ve düz illüstrasyonlardan oluşan yepyeni bir dünya gözlerimizin önünde açıldı.

Düz Bir İllüstrasyon Çizelim!

Bu çalışma için kaynak dosyayı burada sağlıyorum, böylece onu keşfetmek ve biz tasarlarken daha iyi takip etmek için kullanabilirsiniz. Henüz bir Affinity Designer kopyasına sahip değilseniz, deneme sürümünü indirebilirsiniz.

1. Tuval Ayarları

Affinity Designer'ı açın ve Cmd + N (Mac) veya Ctrl + N (Windows) seçeneklerini tıklatarak yeni bir belge oluşturun. Alternatif olarak, “Menü” → “Dosya” → “Yeni” seçeneğine gidebilirsiniz. “Çalışma Yüzeyi Oluştur” kutusunu işaretlemediğinizden emin olun.

Türü “Web” olarak ayarlayın, DPI alanını otomatik olarak 72'ye ayarlayacaktır. Şimdi PPI olarak anlaşılmalıdır, ancak burada ayrıntılara girmeyeceğiz. Konuyla ilgili daha fazla bilgi edinmek istiyorsanız, aşağıdaki iki kaynağı kontrol edin:

• “ÜFE, DPI değil,” Forumlar, Yakın İlgi Alanı
• “ÜFE ve DPI: Fark Nedir?”, Alex Bigman, 99designs

Ayrıca, bu ayarı istediğiniz zaman değiştirebileceğinizi unutmayın. Vektörlerin kalitesi, ölçeklemeden etkilenmeyecektir.

Boyutu 2000 × 1300 piksele ayarlayın ve “Tamam”a tıklayın.

Beyaz tuvalimiz şimdi ayarlandı, ancak başlamadan önce, önce bu dosyayı kaydetmenizi ve bir isim vermenizi öneririm. Bu nedenle, “Dosya” → “Kaydet”e gidin ve “Beetle” olarak adlandırın.

2. Bir Görüntüden Renk Paletini İçe Aktarma

Affinity Designer'da çok kullandığım şeylerden biri, bir görüntüde bulunan renkleri içe aktarma ve onlardan bir palet oluşturma yeteneğidir.

Bunun nasıl yapıldığını görelim.

Çizmek istediğim illüstrasyon için gün batımındaki gibi sıcak renkler düşündüm, bu yüzden Google'da şu sorguyla arattım: “sıcak renkler sarılar turuncular kırmızılar paleti”. Bulduğum tüm resimlerden beğendiğimi seçtim ve yakın zamanda oluşturduğum tuvalimde Affinity Designer'a kopyaladım. (Görüntüyü doğrudan tarayıcıdan tuvale kopyalayıp yapıştırabilirsiniz.)

Renk Örnekleri paneli henüz açık değilse, “Görünüm” → “Stüdyo” → “Renk Örnekleri” menüsünü kullanın. Panelin sağ üst köşesindeki menüyü tıklayın ve “Belgeden Palet Oluştur” seçeneğini seçin ve ardından “Belge Paleti Olarak” seçeneğini tıklayın. “Tamam”ı tıkladığınızda, resimde bulunan renklerin Renk Örnekleri panelinde yeni bir palet oluşturduğunu göreceksiniz. Dosyanızı hala bir adla kaydetmediyseniz, bunun için varsayılan ad “Palet” olacaktır. Varsa, bu paletin adı belgenizle aynı olacaktır, ancak yeniden adlandırmak istiyorsanız, Renk Örnekleri panelinde tekrar sağdaki menüye gidin ve “Palet Yeniden Adlandır” seçeneğini seçin.

Ben buna “Böcek Paleti” diyeceğim.

Artık bu referans görüntüden kurtulabilir veya Katmanlar panelinde gizleyebiliriz. Bu paleti, uyumlu renklerle resmimizi oluşturmak için bir rehber olarak kullanacağız.

Arayüz: Devam etmeden önce, Affinity Designer'daki kullanıcı arayüzünün ana bölümlerine ve en çok kullanılan araçların bazılarının adlarına hızlı bir genel bakış sunacağım.

3. Gradyan Aracıyla Arka Plan Oluşturma

Bir sonraki şey bir arka plan oluşturmaktır. Bunun için sol tarafta görüntülenen araçlara gidin ve Dikdörtgen aracını seçin. Bunu görebilmeniz için başlangıçta rastgele bir dolgu rengi verdiğinizden emin olarak tuval boyunca sürükleyin. Dolgu rengi yongası, üst araç çubuğunda bulunur.

Ardından Doldurma aracını seçin (renk tekerleği simgesi veya klavyede G tuşuna basın) ve üst Bağlam araç çubuğunda türü seçin: "Doğrusal".

Burada birkaç seçeneğimiz var: "Yok" dolgu rengini kaldırır, "Katı" tek bir renk uygular ve geri kalanların tümü farklı degrade türleridir.

Degradeyi düzeltmek ve dikey hale getirmek için imlecinizi uçlardan birinin üzerine getirin ve çekin. Dikey çizgiye yakın olduğunuzda Shift tuşuna basın: Bu, onu tuvalin tabanına tam olarak dikey ve dik yapacaktır.

Ardından, Bağlam araç çubuğunda renk çipine tıklayın ve az önce uyguladığımız degradeye tam olarak karşılık gelen bir iletişim kutusu göreceksiniz. Şimdi renk çipine tıklayın, ek bir iletişim kutusu açılacaktır.

Açılan pencerede “Renk” sekmesine tıklayın ve ardından “RGB Hex Kaydırıcılar”ı seçin; # ile işaretlenmiş alana şu değeri girin: FE8876 . Tamam tuşuna basın". Şimdi degradenin yeni renge nasıl güncellendiğini göreceksiniz. Bu eylemi degrade iletişim kutusundaki diğer renk durağıyla tekrarlayın ve şu değeri girin: E1C372 .

Şimdi böyle bir şeye sahip olmalısınız:

Katmanlar paneline gidelim ve katmanı “Arka Plan” olarak yeniden adlandıralım. Yeniden adlandırmak için üzerine çift tıklayın ve ardından kilitleyin (sağ üst köşedeki küçük kilit simgesine tıklayarak).

4. Kalem Aracıyla Araba Anahattı Çizimi

Yapmamız gereken bir sonraki şey, arabanın ana hatlarını çizmek için referansımız olacak bir resim aramak. Google'da “Volkswagen Beetle yandan görünüm” için arama yaptım. Bulduğum görsellerden yeşil Beetle'dan birini seçip kopyalayıp belgeme yapıştırdım. (Katmanı, yanlışlıkla hareket etmemesi için referans görüntüyle kilitlemeyi unutmayın.)

Ardından, yan araç çubuğunda Kalem aracını seçin (veya P 'ye basın), daha rahat çalışabilmeniz için biraz yakınlaştırın ve resimdeki arabanın ana hatlarını izleyerek bir segmenti izlemeye başlayın. Kontur panelinde kontura 8 piksel genişlik verin.

Not: İzlediğiniz segmentler otomatik olarak görüntünün üstüne yerleştirileceğinden, bir katman oluşturmanız gerekmez.

Kalem aracı, yeni başlayanlar için en göz korkutucu araçlardan biridir ve açıkçası vektör grafiklerinde öğrenilmesi gereken en önemli araçlardan biridir. Mükemmelliğe ulaşmak için pratik yapmak gerekli olsa da, aracı daha iyi kullanmanıza yardımcı olacak bazı basit eylemleri anlamak da önemlidir. Haydi ayrıntılara dalalım!

Affinity Designer'da Kalem aracıyla izlerken, iki tür düğüm göreceksiniz: önce kare düğümler belirir ve tutamaçları çektiğinizde bunlar yuvarlak düğümlere dönüşecektir.

Affinity Designer birkaç kalem modu ile birlikte gelir, ancak biz sadece “Kalem Modu” olarak adlandırılan varsayılanı kullanacağız ve arabanın izini sürdüğümüzde Alt'a tıklayarak bir tutamaçtan kurtulacağız. izlenecek segmentin bölümü, ona bağlı olsa bile bir öncekinden bağımsız olacaktır.

İşte nasıl devam edeceğiniz. Kalem aracını seçin, bir kez tıklayın, biraz uzaklaşın, ikinci kez tıklayın (1 ve 2 düğümleri arasında düz bir çizgi oluşturulacaktır), ikinci düğümü sürükleyin (bu bir eğri oluşturacaktır), Kaldırmak için düğümü Alt tuşuna basarak tıklayın ikinci kontrol tutamacı, ardından düğüm 3 ile devam edin, vb.

Alternatif bir yol, Kalem aracını seçmek, bir kez tıklayın, biraz uzaklaşın, ikinci kez tıklayın (1 ve 2 düğümleri arasında düz bir çizgi oluşturulacaktır), ikinci düğümü sürükleyin (bu bir eğri oluşturacaktır), ardından , fareyi hareket ettirmeden Alt tuşuna basarak bu tutamacı kaldırmak için ikinci tutamağın noktasına tıklayın, ardından düğüm 3 ile devam edin ve bu şekilde devam edin.

Not: Mükemmel olmayan bölümleri izlemekten korkmayın. Zamanla, Kalem aracını daha iyi kavrayacaksınız. Şimdilik, her düğümün ve satırın sonunda görünmesini istediğimiz gibi görünmesi çok önemli değil. Aslında, Affinity Designer, segmentleri ve düğümleri değiştirmeyi gerçekten kolaylaştırıyor, bu nedenle başlamak için kaba bir çizgi izlemek gayet iyi. Kalem aracının (yeni başlayanlar için) nasıl kolayca kullanılacağına dair daha fazla bilgi için Isabel Aracama'nın eğitim videosuna göz atın.

5. Segmentleri Yeniden Şekillendirme ve Köşe Aracını Kullanma

Şimdi ihtiyacımız olan şey, tüm bu kaba hatların düzgün ve kıvrımlı görünmesini sağlamak. İlk olarak düz parçaları çekmek için çekeceğiz ve daha sonra Köşe aracını kullanarak iyileştireceğiz.

Yan araç çubuğunda Düğüm aracını tıklayın veya klavyenizdeki A tuşuna basarak seçin. Şimdi referans resminizin çizgilerini takip etmek için segmentleri çekmeye başlayın. Ayrıca tutamaçları, çizgiyi buna göre hareket ettirerek ve çekerek ihtiyacınız olan şekli almasına yardımcı olmak için kullanabilirsiniz. Sadece referans görüntüye uyacak şekilde yapın, ancak henüz mükemmel değilse çok fazla canınızı sıkmayın. Düğüm aracıyla (A), düğümleri hem seçebilir hem de taşıyabilirsiniz , ancak değiştirmek için eğrileri kendilerine tıklayıp sürükleyebilirsiniz.

Tüm segmentler ihtiyacımız olan yere geldiğinde, Köşe aracını (kısayol: C ) kullanarak köşelerini düzleştireceğiz. Bu, Affinity Designer'daki en sevdiğim araçlardan biri. Canlı Köşe aracı, düğümlerinizi ve segmentlerinizi mükemmel bir şekilde ayarlamanıza olanak tanır. C tuşuna basarak seçin veya Araçlar kenar çubuğundan seçin. Yöntem oldukça basittir: Köşe aracını, düzleştirmek istediğiniz keskin düğümlerin (kare düğümler) üzerinden geçirin. Gerekirse, bir segmentin bir bölümünü, onu veya tutamaçlarını çekerek ayarlamak için Düğüm aracına ( A ) geri dönün. (Pürüzsüz düğümler (yuvarlak düğümler) daha fazla yumuşatmaya izin vermez ve Köşe aracını seçtiğiniz anda daha küçük bir daire görüntülerler.)

Köşelerimiz ve segmentlerimiz iyi göründüğünde, şekli doldurmak ve konturun rengini değiştirmek isteyeceğiz. Araba için yeni oluşturduğumuz kapalı eğri çizgisini seçin, dolgu rengi çipine tıklayın ve HEX renk alanına FFCF23 . Yanındaki kontur rengi çipine tıklayın ve 131000 .

Şimdi Kalem aracıyla bir şekil oluşturun ve siyahla ( 000000 ) doldurun. Aracın kaportasının arkasına yerleştirin (sarı şekil). Oluşturacağınız yeni nesnenin tam şekli, aşağıdaki resimde olduğu gibi alt tarafının düz olması gerektiği dışında gerçekten önemli değil. Katmanlar paneli veya “Düzenle” → “Bir Arka” menüsü aracılığıyla ana gövdenin (sarı şekil) arkasına yerleştirin.

6. Akıllı Kopyalama Kullanarak Tekerlekleri Oluşturma

Daha sonra tekerlekleri yerine koymamız gerekiyor. Araçlar'da, Elips aracını seçin ve referans resimdeki tekerlekle aynı boyutta bir daire oluşturarak tuvalin üzerine sürükleyin. Daireyi orantılı hale getirmek için sürüklerken Shift'e tıklayın. Ek olarak, Ctrl (Windows) veya Cmd (Mac) tuşunu basılı tutarak , merkezden dışarı doğru mükemmel bir daire oluşturabilirsiniz.

Not: Gerekirse, daha iyi görmek için şimdiye kadar oluşturulan katmanları gizleyin veya geçici olarak opaklıklarını azaltın. Herhangi bir şekli seçip klavyede 1'den 9'a kadar bir sayıya basarak opaklığı değiştirebilirsiniz; burada 1 %10 opaklık ve 9 %90 opaklık değeri uygular. Opaklığı %100'e sıfırlamak için 0'a (sıfır) basın.

Diğerleriyle kontrast oluşturan rastgele bir renk seçin. Başlangıçta bunu yapmayı seviyorum, böylece şekilleri iyi kontrastlı ve farklılaşmış görebiliyorum. Onlardan memnun kaldığımda, son rengi uygularım. Çizerken içini görebilmek için opaklığı %50'ye ayarlayın (klavyede 5'e tıklayın).

Tekerlek şeklinize yakınlaştırın. Yakınlaştırma aracını seçmek için Z'ye basın ve Alt tuşunu basılı tutarken şeklin üzerine sürükleyin veya Katmanlar panelinde buna karşılık gelen küçük resme çift tıklayın. (Önceden seçilmesi gerekmez, ancak bu, Katmanlar panelinde görsel olarak bulmanıza yardımcı olur.)

Şimdi Akıllı kopyalamayı nasıl kullanacağımızı öğreneceğiz ve bazı eşmerkezli daireleri yapıştıracağız.

Daireyi seçin ve Cmd + J (Mac) veya Ctrl + J (Windows) tuşlarına basın. Orijinal dairenin üzerine yeni bir daire yerleştirilecektir. Seçin. Bu komut “Düzenle” → “Çoğalt” altında bulunur ve Akıllı kopya veya Akıllı kopya olarak da bilinir.

Shift + Cmd (Mac) veya Shift + Ctrl (Windows) tuşlarına tıklayın ve daha küçük bir eşmerkezli daireye dönüştürmek için sürükleyin. Referansınıza uyması için her seferinde boyut olarak biraz daha küçülterek üç kez tekrarlayın. Shift + Cmd (Mac) veya Shift + Ctrl (Windows) tuşlarına basarak bir şekli akıllıca çoğaltmak, şeklin göreceli bir şekilde dönüştürülmesini sağlar. Bu, üçüncü akıllı kopya şeklinizden itibaren gerçekleşecektir.

Yani, tekerlek için eşmerkezli dairelerimiz var ve şimdi renkleri değiştirmemiz gerekiyor. Renk Örnekleri paneline gidin ve daha önce oluşturulan palette, arabanın gövdesine uyguladığımız sarı ile iyi çalışan renkleri seçin. Bir renk seçebilir ve en iyi olduğunu düşündüğünüz şeye uyum sağlamak için biraz değiştirebilirsiniz. Dolgu ve kontur renkleri uygulamamız gerekiyor. 11,5 piksellik bir kontur uygulayacağımız en içteki daire dışında, kontura arabanın geri kalanıyla aynı genişlikte (8 piksel) vermeyi unutmayın. Ayrıca, her bir eşmerkezli dairenin opaklığını %100'e geri getirmeyi unutmayın.

Bu renkleri dıştan iç halkalara doğru seçtim: 5D5100 , 918A00 , CFA204 , E5DEAB .

Şimdi hepsini birlikte seçip gruplandırmak istiyoruz. Hepsini seçin ve Cmd + G (Mac) veya Ctrl + G (Windows) tuşlarına basın. Katmanlar panelinde yeni gruba "Ön Tekerlek" adını verin. Bu grubu çoğaltın ve Shift tuşuna basarken onu seçin ve arka tekerlekle örtüşene kadar tuval boyunca sürükleyin. Katmanı buna göre adlandırın.

7. Aracın Kaportasının İç Çizgilerini Çizmek İçin Eğrileri Kırma ve Kırpma Maskeleri

Çalışmaya devam etmek için ya tüm katmanları gizleyin ya da yolunuza çıkmamaları için opaklığı azaltın. Ön ve arka çamurlukların izini sürmeliyiz. Ana gövde için yaptığımızın aynısını yapmalıyız. Kalem aracını seçin ve üzerinde bir anahat çizin.

İzlendikten sonra, tutamaçları, düğümleri ve Köşe aracını kullanarak değiştirin. Ayrıca arabanın arkasındaki siyah şekli biraz değiştirdim, böylece gövde çalışmasının alt kısmında biraz daha fazla görünecek.

Şimdi arabayı tanımlayan bazı iç çizgilerin izini sürmek istiyoruz. Bunun için ana sarı şekli çoğaltacağız, dolgu rengini kaldıracağız ve tuvaldeki illüstrasyonumuza yerleştireceğiz.

Klavyede A'ya basın ve segmentin alt düğümlerinden herhangi birine tıklayın. Üst Bağlam araç çubuğunda, “Eylem” → “Eğriyi Kır” üzerine tıklayın. Şimdi, seçilen düğümün kırmızı çerçeveli kare bir düğüme dönüştüğünü göreceksiniz. Üzerine tıklayın ve herhangi bir yere çekin. Gördüğünüz gibi, segment artık açık . Sil veya Geri Al tuşunu (Windows) veya Sil tuşunu (Mac) tıklayın ve tüm alt düğümler için aynısını yapın, yalnızca en soldaki ve en sağdakileri bırakın ve ayrıca ekranın üst bölümünün solunda kalanlara çok dikkat edin. Segment hiç deforme olmaz.

Bu yöntemi bir ana nedenden dolayı kullanıyorum: Mevcut bir satırı kopyalamak, daha tutarlı bir görünüm ve daha uyumlu satırlar sağlar.

Şimdi yeni açılan eğriyi seçin ve üst üste koyduğunuzda ana sarı şekle sığacak şekilde küçültün. Katmanlar panelinde, bir kırpma maskesi oluşturmak için bu eğriyi sarı şekil katmanına sürükleyin. Kırpma maskesi oluşturmanın nedeni basittir: Bir nesnenin başka bir nesnenin içinde olmasını istiyoruz, böylece üst üste binmezler (yani her iki nesne de görünür), ancak biri diğerinin içinde yuvalanır. Bunu yapmamak, iç içe geçmiş nesnenin bazı bitlerinin görünür olmasına neden olur, bu bizim istediğimiz şey değildir; mükemmel, temiz hatlara ihtiyacımız var.

Not: Kırpma maskeleri, maskelerle karıştırılmamalıdır. Küçük resim nedeniyle (maskeler uygulandığında kırpma benzeri bir simge gösterir) ve kırpmak üzereyken, katmanın yarısından biraz daha fazla olan yatay olarak mavi bir şerit görüntülendiğinden , kırptığınızı ve maskeleme yapmadığınızı bileceksiniz. Öte yandan maskeler, küçük resmin yanında küçük bir dikey mavi şerit görüntüler.

Şimdi, yeni oluşturulan segmenti arabanın ana şeklinin içine yerleştirmek için kırpma maskemizi uyguladığımıza göre, bazı düğümleri kırdım ve bazılarını tam olarak istediğim gibi yerleştirmek için biraz hareket ettirdim. Genişliği biraz uzattım ve daha önce gördüğümüz yöntemlerin tamamen aynısını kullanarak ön tarafı segmentin geri kalanından ayırdım. Ardından, yumuşatılması gerektiğini hissettiğim her şeyi yumuşatmak için biraz daha Köşe aracı uyguladım. Son olarak, Kalem aracıyla, arabayı tanımlayan geri kalan iç çizgileri oluşturmak için bazı ekstra düğümler ve segmentler ekledim.

Not: Bir maskede, kırpma maskesinde veya nesneyi doğrudan Katmanlar panelinde seçmediğinizde bir grup içinde bir nesne seçmek için, nesneyi seçene kadar çift tıklamanız veya Ctrl (Windows) veya Cmd ( Mac) ve tıklayın.

Bahsedilen yöntemler kullanılarak bazı değişiklikler ve ince ayarlar yapıldıktan sonra arabamız şöyle görünür:

8. Bazı İlkel Şekilleri Kullanarak Pencereleri Çizmek

Yan Araç Çubuğunda, Yuvarlatılmış Dikdörtgen aracını seçin. Bir şekil oluşturmak için tuval üzerinde sürükleyin. Şeklin boyutu otomobilin gövdesine uymalı ve orantılı görünmelidir. Nasıl yaratırsanız yaratın, daha sonra yeniden boyutlandırabileceksiniz, bu yüzden fazla endişelenmeyin.

Not: Konturlu bir şekil oluşturup yeniden boyutlandırdığınızda, konturun nesneyle orantılı olarak ölçeklenmesini istiyorsanız Kontur panelinde "Nesneyle ölçekle" seçeneğini işaretlediğinizden emin olun. Bir nesneyi konturlu olarak yeniden boyutlandırmanız gerektiğinde, bu seçeneğin işaretli olması ile işaretlenmemiş olması arasındaki farkı görsel olarak karşılaştırmanızı tavsiye ederim.

Yuvarlak dikdörtgeninizi tuvale yerleştirdikten sonra, maviye yakın bir renkle doldurun. #93BBC1 kullandım. Ardından, Düğüm aracıyla seçin ( A 'ya basın). Şimdi sol üst köşede küçük bir turuncu daire göreceksiniz. Dışarıya veya içeriye doğru çekerseniz, o köşedeki açının nasıl değiştiğini göreceksiniz. Üst Bağlam araç çubuğunda, "Tek yarıçap" seçeneğinin işaretini kaldırabilir ve istediğiniz açıyı dikdörtgenin her köşesine ayrı ayrı uygulayabilirsiniz. İşaretini kaldırın ve sol üst köşedeki küçük turuncu daireyi içeri doğru çekin. Çekerseniz, belirli bir yüzdeye yuvarlayabilirsiniz, ancak bunun için giriş alanına istediğiniz değeri girebilir, hatta beraberinde gelen kaydırıcıyı kullanabilirsiniz (tıklayıp tıklamadığınızı gösterecektir). küçük şerit). %100 değerini uygulayalım.

İlkel şekiller, vektör manipülasyonu (eğriler ve çizgilerle karşılaştırıldığında) açısından çok esnek değildir, bu nedenle, böyle bir şekle (dolgu, kontur, köşeler, genişlik ve yüksekliğin ötesinde) daha fazla değişiklik uygulamak için onu dönüştürmemiz gerekecek. eğrilere.

Not: İlkel bir şekli eğrilere dönüştürdüğünüzde, geri dönmenin bir yolu yoktur ve şekli küçük turuncu duraklardan geçirme seçeneği olmayacaktır. Daha fazla ince ayara ihtiyacınız varsa, bunu Köşe aracıyla yapmanız gerekecektir.

Düğüm aracıyla ( A ) dikdörtgeni seçin ve üst Bağlam araç çubuğunda "Eğrilere Dönüştür" düğmesini tıklayın. Sınırlayıcı kutu kaybolacak ve şekli oluşturan tüm düğümler gösterilecektir. Ayrıca, Katmanlar panelinde nesnenin adının "Yuvarlak Dikdörtgen"den "Eğri"ye nasıl değiştiğine dikkat edin.

Şimdi bir araba penceresine benzeyen bir nesne oluşturmak için şekli değiştirmeniz gerekiyor. Nasıl görünmesi gerektiğine dair daha iyi bir fikir edinmek için referans resme bakın. Ayrıca, arabadaki çizilen çizgilerin geri kalanını düzeltin, böylece hepsi birbirine güzelce otursun. Şekiller mükemmel görünmüyorsa (henüz) endişelenmeyin. Onları doğru yapmak bir uygulama meselesidir! Kalem aracını kullanarak Alt ve Shift tuşlarıyla kendinize yardımcı olun ve segment düğümlerinin ne kadar farklı davrandığını gözlemleyin. Ön pencereyi oluşturduktan sonra devam edin ve aynı yöntemi izleyerek arka pencereyi oluşturun.

Ayrıca, üç dikdörtgen çizerek, beyaz renkle doldurarak, biraz ofset ile üst üste bindirerek ve opaklığı %50'ye ayarlayarak yapacağımız pencerenin yansımalarını da oluşturmamız gerekiyor.

İmleci üst sınırlayıcı kutu beyaz dairenin üzerine getirin ve iki ucu kavisli bir oka dönüştüğünde, dikdörtgenlere bir açı vermek için hareket ettirin. Daha önce gördüğümüz gibi Katmanlar panelinde pencere şeklinin üzerine sürükleyerek bir kırpma maskesi oluşturun. Bunu, aşağıdaki alternatif yöntemleri izleyerek de yapabilirsiniz:

• “Katman” → “Ekle” → “İçe Ekle” menüsü altında seçilen pencere nesnesi.
• Ctrl + X (Windows) ve Cmd + X (Mac) klavye kısayoluyla, pencere nesnenizi seçin → “Düzenle” → “İçine Yapıştır” ( Ctrl / Cmd + Alt + V ).

Bunu arka pencere için tekrarlayın. Görsel ilgi eklemek için yansımaları çoğaltabilir ve dikdörtgenlerin opaklıklarını ve genişliklerini biraz değiştirebilirsiniz.

9. Görsel İlgi Ekleme: Yarım Ton Desen, Gölgeler ve Yansımalar

Gölgeler ve yansımalarla başlamadan önce, tüm unsurların iyi entegre görünmesi için araca fazladan bir parça eklememiz gerekiyor. Kapıların altına oturan parçayı oluşturalım. Basit bir dikdörtgendir. Aşağıdaki resimdeki gibi görünecek şekilde ilgili katman sırasına yerleştirin ve kompakt görünmesi için tüm parçaları bir araya getirmeye devam edin. Ayrıca önü kısaltmak için ön çamurluğu biraz hareket ettireceğim.

Şimdi noktalı resim desenini oluşturalım.

Kalem aracını ( P ) alın ve tuvalinizde bir çizgi çizin. Kontur panelinde (bunu Kalem aracının kontur için üst kısımdaki Bağlam araç çubuğu bölümünde de yapabilirsiniz), boyutu 7 piksel gibi bir değere ayarlayın. Gerekirse bu değeri daha sonra kolayca değiştirebiliriz. “Tire” çizgi stilini seçin ve diyalog ayarlarının geri kalanı aşağıdaki gibi olmalıdır:

Şimdi, bu satırı çoğaltın ve yenisini biraz sola kaydırarak aşağıya yerleştirin.

Her iki satırı da gruplayın, bu grubu Akıllı kopya ile çoğaltın ve şöyle bir şey oluşturun:

Affinity Designer'da bir seçimi sürüklediğinizde, yalnızca tamamen seçim alanı içinde olan nesneler seçilecektir. Tüm nesneleri tamamen sürüklemek zorunda kalmadan seçmek istiyorsanız, aşağıdaki seçeneklere sahipsiniz:

• Mac: ⌃ ( Ctrl ) tuşunu basılı tutmak, siz çizerken seçim çerçevesine dokunan tüm nesneleri seçmenize olanak tanır.
• Windows: Farenin sol düğmesini tıklayıp basılı tutun, bir seçimi sürüklemeye başlayın ve ardından sağ fare düğmesini de tıklayıp basılı tutun. Her iki düğmeyi de basılı tuttuğunuzda, seçim çerçevesine dokunan tüm nesneler seçilecektir.
• Alternatif olarak, bu davranışı genel bir tercih haline getirebilirsiniz. Mac'te, "Benzerlik Tasarımcısı" → "Tercihler" → "Araçlar"a gidin ve "Seçim çerçevesiyle kesiştiğinde nesneyi seç"i işaretleyin. Windows'ta “Düzenle” → “Tercihler” → “Araçlar”a gidin ve “Seçim çerçevesiyle kesiştiğinde nesneyi seç”i işaretleyin.

Çizimi daha ilginç hale getirmek için bazı satırların başını ve sonunu biraz değiştireceğiz. Bunu yapmak için Düğüm aracını ( A ) seçiyoruz ve düğümleri biraz içe doğru hareket ettiriyoruz.

Şimdi şöyle görünmelidir:

Deseni tasarımımıza uygulamak için her şeyin gruplandırıldığından emin olun, kopyalayıp araba resmimize yapıştırın, opaklığını %30'a düşürün ve ayrıca boyutu küçültün (Kontur panelinde "Nesneyle ölçekle" seçeneğinin işaretli olduğundan emin olun) . Daha sonra bir kırpma maskesi oluşturacağız. Çizim boyunca bu desenin açısında, renginde ve boyutunda tutarlılık sağlamak önemlidir.

Şimdi, yarım ton desenini arka çamurluğa ve arabanın yanına uygulayın; ister çamurluğun kendisi isterse yeni bir şekil olsun, önce onun için bir yer tutucu oluşturduğunuzdan emin olun. Deseni uyumlu bir şekilde çiziminize uyarlamanız gerekiyorsa bazı ince ayarlar yapın. Toplam boyutu, noktaların boyutunu, şeffaflığı, açıyı vb. değiştirebilirsiniz, ancak bu değişiklikleri desen bitlerine uygularken tutarlı olmaya çalışın.

Pencerelerin altındaki gölge için yer tutucu olarak bir eğri çizdim ve daha koyu görünmesi için #CFA204 rengini uyguladım.

10. Arabanın Kalan Elemanlarının Oluşturulması

Şimdi, her şey arabayı oluşturan öğelerin geri kalanını yaratmakla ilgili: tamponlar, arka tekerlek ve sörf tahtası ve ayrıca tasarım çıkartmaları.

• Ön ve arka ışıklar
  Ön ışık için Segment aracına geçin ve şekli çizin. Sonra onu biraz döndürmemiz ve arabanın ana gövdesinin altında bir yere yerleştirmemiz gerekiyor. Aynısı arka ışık için ancak Dikdörtgen aracı kullanılarak yapılabilir. Renkler, ön ışık için #FFDA9D #FF0031 ve arka ışık için #FF0031'dir.

• Surfboard
  To create the surfboard, we will use the Ellipse tool and draw a long ellipse. Convert it to curves and pull up the lower segment, adjusting a bit the handles to give it the ideal shape.

Now, just create two small rounded rectangles, with a little extra line on top for the board's rack. Place them in a layer behind the car's main body shape.

With the Pen tool, add the rudder. Its color is #B2E3EF . And for the stroke, use a 6-pixel width and set the color to #131000 .

• Spare wheel
  Now let's create the the spare wheel! Switch to the Rounded Rectangle tool. Drag over the canvas to draw a shape. Color it #34646C , and make the stroke #131000 and 8 pixels in size. The size of the spare wheel should fit the proportions of your car and should have the same diameter as the other wheels, or perhaps just a bit smaller. Pull the orange dots totally inwards, and give it a 45-degree angle. For the rack that holds the wheel, create a small piece with the Rectangle tool, and give it the same 45-degree angle, color it #4A8F99 , and make the stroke #131000 and 4.5 pixels in size. Create the last piece that rests over the car in the same way, with a color of #34646C , and a stroke that is #131000 and 4.5 pixels in size.

Lastly, let's create a shadow inside the wheel to add some more interest. For this, we'll create a clipping mask and insert an ellipse shape with a color of #194147 , without a stroke.

Note: We may want to create the same shadow effect for the car wheels. Use the Rectangle tool and a color of #312A00 , create a clipping mask, and insert it in the wheel shape, placing it halfway.

• Bumpers
  For the bumpers, we will apply the boolean operation “add” to two basic shapes and then clip-mask a shadow, just as we did for the wheels.

Boolean operations are displayed in the section of icons labeled “Geometry” (Mac) and “Operations” (Windows). (Yes, the label names are inconsistent, but the Affinity team will likely update them in the near future, and one of the labels will become the default for both operating systems.) If you don't see them in the upper toolbar, go to “View” → “Customize Toolbar”, and drag and drop them into the toolbar.

Important: If you want the operation to be non-destructive, hold the Alt key while clicking on the “Add” icon (to combine the two basic shapes).

Not: "Gölge" nesnesini tamponun içine yapıştırmaya çalışırsanız, yalnızca tampon bir bütün nesneyse (yıkıcı bir işlem) çalışacaktır. Yani, Alt + “Ekle” kullandıysanız, bu şimdi çalışmayacaktır. Bununla birlikte, Bileşik şekli (iki nesneden oluşan bir tahribatsız işlemin sonucu) bir Eğri'ye (bir tam vektör nesnesi) dönüştürerek yine de bu sorunu çözebilirsiniz. Sadece Bileşik şekle tıklamanız, ardından menüde “Katman” → “Eğrilere Dönüştür” seçeneğine gitmeniz (veya Ctrl + Enter tuş kombinasyonunu kullanmanız) yeterlidir.

• Arka pencere
  Kalem aracıyla oluşturacağımız arka camı ve arabanın dekorasyonunu hala özlüyoruz. İki renkli şerit için Kare aracına ihtiyacımız var ve ardından bu iki dikdörtgeni ana gövdeye klipsle maskeliyoruz. Boyut 30 × 380 pikseldir ve renkler #0AC8CE ve #FF6500 . Onları doğru katmana yerleştirdiğinizden emin olarak klipsleyin, böylece daha önce çizdiğimiz koyu çizgiler üstlerinde kalacak .

• 56 numara
  “56” numaralı dekorasyon için, Sanatsal Metin aracını (“T”) kullanın ve “56” yazın. Çizimin stiline uyan güzel bir yazı tipi seçin veya benim kullandığımı deneyin.

Metin nesnesinin rengi #FFF3AD .

(Arka çamurluğun arkasına, egzoz borusunun ucu gibi görünecek fazladan kare bir şekil ekledim. Renk #000000 .)

• Renk şeritleri
  Bunu yaptığımıza göre, renk şeritlerini ve üst üste geldikleri pencereyi kontrol edin. Gördüğünüz gibi (ve pencere camına biraz şeffaflık koyduğumuz için), içinden turuncu şerit görülebilir . Bunu düzeltmek için tekrar biraz Boolean gücü kullanalım.

Pencere nesnesini çoğaltın. Katmanlar panelinde hem pencere nesnesini (az önce çoğalttığınız) hem de turuncu şeridi seçin. Bir "çıkarma" işlemi uygulayın.

Şimdi, turuncu şerit mükemmel bir şekle sahip, pencereyi üst üste gelmeyecek şekilde yerleştiriyor.

• Sigara içmek
  Egzozdan çıkan dumanı oluşturmak için beyaz çizgili, 5,5 piksel boyutunda ve dolgusuz bir daire çizin. Onu eğrilere dönüştürün ve noktalarından birini kırın. Alt düğümden Kalem aracıyla düz bir çizgi çizin.

Bu "kırık" daireyi çoğaltın ve daha küçük dairelere yeniden boyutlandırın ve bunları şöyle görünecek şekilde çevirin ve yerleştirin:

Not: Araba bittiğinde, tüm katmanlarını birlikte gruplayın. Bunu yaparsanız, çalışmaya devam etmek çok daha kolay olacaktır!

11. Zemin ve Arka Plan Öğelerinin Oluşturulması.

• Zemin
  Zemin için basit bir çizgi çizelim ve görsel ilgi yaratmak ve biraz hareket önermek için onu kıran iki bit ekleyelim. Ayrıca zemini oluşturmak için fazladan bir parça eklemek istiyoruz. Bunun için Dikdörtgen aracını kullanacağız ve sol durak için #81BEC7 ve sağ durak için #008799 gradyan rengine sahip bir dikdörtgen çizeceğiz. %30 opaklık verin.

• Bulutlar
  Bulutlar için (ilkel) vektör şekilleri listesinden Bulut aracını seçin. Oranları korumak için Shift tuşunu basılı tutarak bir bulut çizin. Beyaz yap. Eğrilere dönüştürün ve Düğüm aracıyla ( A ) alttaki düğümleri seçin ve silin. Sol alt ve sağ alt düğümleri alt seçin (tüm diğerlerini sildikten sonra) ve ardından Bağlam araç çubuğunda Dönüştür bölümünde "Keskin'e Dönüştür" seçeneğini seçin. Bu, alt segmentinizi düz hale getirecektir. Saydamlık aracıyla ( Y ) biraz saydamlık uygulayın ve bu bulutu çoğaltın. Bulutları çiziminize yerleştirin, istediğiniz gibi dağıtın ve farklı boyutlarda.

Bulutlarımda 12 baloncuk ve %82'lik bir iç yarıçap var. Aynısını yapabilir veya bu değerleri beğeninize göre değiştirebilirsiniz.

• Palmiye ağaçları
  Palmiye ağaçlarını oluşturmak için soldaki ilkel şekiller listesinden Hilal aracını kullanın. Sol durağı #F05942 ve sağ durağı #D15846 D15846 olan degrade bir renk verin.

Hilal şeklini çizmek için sürükleyin. Dönme merkezini sınırlayıcı kutunun altına getirin ve ona -60 derecelik bir açı verin.

Dönme merkezi, Taşıma (ve Düğüm) aracının Bağlamsal araç çubuğu bölümünde görünür hale getirilebilir. Küçük bir artı simgesi gibi görünüyor. Üzerine tıkladığınızda, bir nesnenin dönüş merkezini hareket ettirmek için artı işareti gösterilir. Cmd + C ve Cmd + V (Mac) veya Ctrl + C ve Ctrl + V (Windows) aracılığıyla veya tıklayarak ve ardından Alt + nesneyi sürükleyerek çoğaltın ve yeni hilalin açısını -96'ya taşıyın derece. Biraz daha küçük yapın. İki şekli kopyalayın ve yatay olarak çevirin.

Ben de yarattım ve fazladan hilal.

Yapraklarda girintiler oluşturmak için nesneyi eğrilere dönüştürün, Düğüm aracıyla bir düğüm ekleyin ve içeri doğru çekin. Girdabı keskinleştirmek için “Dönüştür” → “Keskin”i kullanın.

Kalem aracıyla palmiye ağacının gövdesini oluşturun, tüm şekilleri bir araya toplayın ve bir "ekleme" boolean uygulayın. Bu şekilde, tüm şekiller tek bir şekle dönüşecektir. %60 opaklık uygulayın.

Ağaçları birbirinden biraz farklı kılmak için boyutları değiştirerek ve ince ayar yaparak ağaç şeklini birkaç kez çoğaltın. (Onları tamamen aynı yapmak, daha az ilginç bir görüntüye neden olur.)

Yapmamız gereken son şey güneş.

• Güneş
  Bunun için bir elips çizin ve ona #FFFFBA rengini uygulayın. Saydamlık aracıyla ( Y ) bir saydamlık uygulayın; burada alt kısım saydamdır ve üst kısım opaklaşır.

Şimdi, güneş çemberi üzerinde birkaç yuvarlak dikdörtgeni üst üste bindirerek ve onları çıkararak biraz ayrıntı ekleyeceğiz (tercih ederseniz, yıkıcı olmayan bir eylem için Alt'a tıklayın).

Güneşinizi sahneye yerleştirin ve işimiz bitti!

12. İstifleme Sırası (Ve Katmanların Adlandırılması) Üzerine Bir Not

Çalışırken ve çiziminizi daha da karmaşık hale getirecek olan nesnelerin (katmanların) sayısı arttıkça, katmanlarınızın yığın sırasını unutmayın. Katmanları adlandırmaya ve doğru sıraya yerleştirmeye ne kadar erken başlarsanız o kadar iyi olur. Ayrıca, yaptığınız katmanları kilitleyin (özellikle arka plan gibi şeyler için), böylece çalışırken yolunuza çıkmasınlar.

Bu çizimde, öğelerin aşağıdan yukarıya sıralaması şöyledir:

• arka fon,
• zemin,
• Güneş,
• bulutlar,
• Palmiye ağaçları,
• araba.

Çözüm

Umarım büyük bir sorun yaşamadan tüm adımları uygulayabilirsiniz ve şimdi Affinity Designer'ın bazı ana araçlarını ve eylemlerini daha iyi anlayabilirsiniz. (Tabii ki, bazı sorularınız varsa veya yardıma ihtiyacınız varsa, aşağıya bir yorum bırakın!)

Bu araçlar, yalnızca düz illüstrasyonlar oluşturmanıza değil, aynı zamanda birçok başka sanat eseri oluşturmanıza da olanak tanır. Burada kullandığımız araçlar, eylemler ve prosedürler, tasarımcıların ve illüstratörlerin (ben dahil) günlük olarak kullandıkları, basit illüstrasyon projeleri veya çok daha karmaşık olanlar için en yararlı ve yaygın olanlardan bazılarıdır.

Ancak, en karmaşık çizimlerim bile genellikle bu eğitimde çalışırken gördüğümüz araçlara ihtiyaç duyar! Esas olarak, her bir araçtan ne kadar kazanabileceğinizi anlamak meselesidir.

Yolunuza çıkabilecek katmanları kilitlemek (veya yarı saydamlık kullanmak), katmanları doğru sırayla istiflemek ve adlandırmak gibi birkaç önemli ipucunu unutmayın, böylece en karmaşık çizimlerin bile organize edilmesi ve birlikte çalışmak. Sık sık pratik yapın ve iş akışınızı iyileştirecek şekilde bir şeyler düzenlemeye çalışın - bu, daha iyi sanat eserleri ve daha iyi zaman yönetimine de yol açacaktır.

Ayrıca, bu tür bir illüstrasyonun nasıl oluşturulacağı hakkında daha fazla bilgi edinmek için YouTube kanalımda yayınladığım eğitim videosuna göz atın.