Adobe Illustrator'da Kod Sayfası Çizimi Oluşturma

Adobe Illustrator'da Kod Sayfası Çizimi Oluşturma


Tasarım toplumunda devam eden tüm düz tarz deliliklerle, bunun geleceğin yönü nasıl olduğunu hızla görebiliriz.Simge tasarımı, mobil tasarım veya web tasarımı bize oynamak için, güzel eğlenceli renkler, çizgiler ve şekiller yeni bir dünya yaratıyor.
 
Bunu söyleyerek, mevcut eğitim bilgisayar kodlamasında uzmanlaşmış bir web sitesi sayfası için basit ve çekici bir illüstrasyon oluşturmanıza yardımcı olacak .
 
 
 
 
1. Adım - uygun bir belge oluşturmak
 
 
Illustrator uygulamasını açın ve aşağıdaki ayarlarla yeni bir belge oluşturun:
 
çalışma yüzeyinin sayısı : 1
Birimler : piksel;
genişlik : 1920 piksel;
Yükseklik : 1080px;
renk modu : RGB;
raster efektleri : 72ppi;
 
yeni nesneleri piksel ızgarasına hizalayın : işaretlendi.

 
 
Neden çalışma yüzeyinde böyle büyük bir boyut seçtiğimi merak ediyor olabilirsiniz. Apple'ın (ve yüksek çözünürlüklü monitörleri sunan diğer üreticilerin) Retina teknolojisini biliyorsanız, bu tür cihazlarda görüntülerin net görünmesi için görüntülerin daha yüksek bir piksel yoğunluğuna sahip olmasını zaten biliyor olabilirsiniz. Dosyayı kaydetmeye hazırlanırken işlemin sonunda nasıl başaracağınızı göreceksiniz.
 
 
Adım 2 - Resmimizi katmanlaştırma
 
 
Katmanlar, başka parçalara ayrılan parçalara sahip detaylı çizimlerle uğraşırken zorunluluktur. Tasarımınızı katmanlayarak, iş akışınızı artıracak ve en önemlisi, yaratıcı süreç sırasında dikkat edilmesi gereken belirli parçaları gizleyebilme ve gösterebilme olanağına sahip olacaksınız. 
 
Artık zaman harcamadan beş kat hazırlayın ve temel olarak aşağıdaki gibi adlandırın:
 
  • arka plan ;
  • merkez daire ;
  • dişli çarklar ;
  • kodlama alanı ;
  • klavye .

 

Şimdi her şey güzel hazırlandı, biz düzgün bir illüstrasyona gelene kadar arka plan katına çıkmaya başlayacağız.
 
 
3. Adım - yapmaya başlayın!
 
 
3.1. Arkaplan
 
Baştan beri, illüstrasyonun bu bölümünün, tasarımın son halini aldığında tasarımın nasıl olacağını görselleştirmenizde size yardımcı olması amaçlandığını söylemek zorundayım. Kompozisyon bir web sayfasında kullanılmaya başlandığından, arka plan CSS kullanılarak ayarlanacak, ancak yol boyunca size daha fazla bilgi vereceğiz.
 
Dolayısıyla çalışma yüzeyimiz 1920 x 1080 piktedir. Bu, aynı ebatta bir dikdörtgen yapmamızı ve ardından yerine koymamız gerektiğini gösterir. Dikdörtgen aracını (M) kavrayın ve çalışma yüzeyinden aynı sayıları gireceğiniz özel genişlik ve yükseklik kutusunu elde etmek için Illustrator'daki herhangi bir yeri tıklatın.
 
Bunu yaptıktan sonra, yeni nesneyi seçin, dolgu rengini #f37053 (R: 243, G: 112, B: 83) olarak değiştirin ve sonra Hizala panelini yatay olarak ortalayın.
 
 
 
Hızlı İpucu : Align to seçeneğinin Çalışma Yüzeyine Hizala ayarlandığından emin olun, böylece nesne çalışma yüzeyini referans noktası olarak kullanır. İşiniz bitince, katmanı kilitlediğinizden ve orta daire katmanına geçtiğinizden emin olun.
 
 
3.2. Daire-pop efekti
 
 
Elips aracını kullanarak 800 x 800 piksel bir nesneyi çizin ve rengini daha koyu turuncu renkli #d46249 (R: 212, G: 98, B: 73) olarak değiştirin. Arka planda olduğu gibi, Align panelini kullanarak ortayı hizalayın.

 

3.3. Kodlama arayüzü
 
 
Dişli çarkları katmanından atladığımızın farkına varmış olabilirsin ve doğrudan doğruya kodlayıcıya katılmışsın. Gibi küçük pencere (bu kod satırları tutan) dişlilerin üstündeki olacak bunu gerçek kompozisyon söz konusu olduğunda bunu alan ve konumlandırma kullanarak iyi bir perspektife sahip ne kadar önemli olduğunu görmek istediğiniz gibi, sonuçta mantıklı .
 
Şirin arabirim oluşturmak için ilk olarak bir hale getirmek için gerekir 420 x 500 piksel dikdörtgen köşe yarıçapı arasında 20px, bu kullanarak renk # 808080 (128 G: 128, B: R, 128) ve daha sonra, aşağıdaki kullanılarak konumlandırmak x ve y koordinatları :
 
x : 960 piksel;
y : 405 piksel.
 
 
 
 
Apple tarzı " trafik ışıkları " düğmelerini tutan en üst bölümü oluşturmamız gerekiyor. Önceki nesneyi kopyalayın, yerine koyun ve ardından yalıtım moduna girmek için üzerine çift ​​tıklayın. Daha sonra doğrudan seçme aracını (A) tutun, 2 altta merkezlenmiş çapa noktası seçin (birincisine sol tıklayın ve ikinci ibreyi basılı tutarken ) ve Del tuşuna basarak silin.
 
 
Başka bir şeye tıklamadan, kalan alt bağlantı noktalarını Join işlevini (bir pc'de ctrl + J , bir mac'da cmd + J ) kullanarak birleştirin.
 
 
 
Her iki bağlantı noktası da seçili durumdayken, dikey giriş kutusuna -432px ve beyaz renkle nesne kısaltmak için taşıma işlevini kullanın.
 
 
 
Sonra, üç 20 x 20 piksel daire oluşturun, birbirlerinden 6 poz yerleştirin ve aşağıdaki gibi soldan sağa renklendirin:
 
kırmızı - # fc6060 (R: 252, G: 96, B: 96);
sarı - # f2e755 (R: 242, G: 231, B: 85);
yeşil - # 79e279 (R: 121, G: 226, B: 121).
 
Tüm 3 nesneyi seçin, onları gruplandırın ( bir bilgisayarda ctrl + G , bir mac'da cmd + G ) ve bunları konumlandırın:
 
x : 803px;
y : 179 piksel.

 

Ana nesneyi (büyük gri olanı) seçin ve yerinde yapıştırın ve aynı işlemi silme ve bağlantı noktalarını birleştirerek sağ orta noktadan kurtulun. Seçilen üst ve alt sağ ankrajlarla -314 piksel sola kaydırın .
 
Nesnenin rengini #dedede (R: 222, G: 222, B: 222) olarak değiştirin ve hem onu ​​hem de altındaki nesneyi seçerek sağ tıklayın> Düzenle> Geri gönder'i tıklayın . Bu kısım sol taraf kod tutucusu olarak işlev görür.
 
Kod kısmı için, 40 x 8 piksel dikdörtgen oluşturun , # c4c4c4 (R: 196, G: 196, B: 196) kullanarak renk verin ve konumlandırın:
 
x : 786px;
y : 237 piksellik.
 
Ardından 7 dikdörtgen daha oluşturun ve bunları doğru yere yerleştirin:
 
1 - boyut : 54 x 8px - konum : x : 793 / y : 251;
2 - boyut : 40 x 8px - konum : x : 786 / y : 265;
3 - boyut: 18 x 8px - konum : x : 775 / y : 279;
4 - boyut: 32 x 8px - konum : x : 804 / y : 279;
5 - boyut: 30 x 8px - konum : x : 781 / y : 317;
6 - boyut: 14 x 8px - konum : x : 807 / y : 317;
7 - boyut: 54 x 8px - konum : x : 793 / y : 331.

 

Referans resimdeki gibi tüm "kod" ları doğru aldıktan sonra, sol oku (semboldan az) ve merkez koda geçmeliyiz. dikdörtgen aracı (M) oluşturmak 32 x 18 pikselden nesneyi kullanarak, doğrudan seçim aracı kapmak sağ taraf çapa noktalarının her ikisi ve daha sonra sağ> Taşı Transform> tıklayın (Taşı>> Nesne ile aynı işlevi Transform) ve bunları çekin -20px dikey olarak .
 
Bunu yaptıktan sonra, nesneyi kopyalayın, ters çevirin (hem dikey hem de yatay ,aynı sonuca gelecektir) ve ardından sol yan tutturma noktaları altındaki şekildeki nesnelerle hizalanana kadar aşağı doğru hareket ettirin.
 
 
Daha büyük kod satırları için 9 dikdörtgen oluşturup bunları aşağıdaki gibi konumlandıracağız:
 
1 - boyut : 34 x 18px - konum : x : 925 / y : 369 - # 949494 ;
2 - boyut : 76 x 18px - konum : x : 990 / y : 369 - #adadad ;
3 - boyut: 76 x 18 piksel - konum : x : 946 / y : 407 - #adadad ;
4 - boyut: 24 x 18px - konum : x : 1006 / y : 407 - # 79e279 ;
5 - boyut: 48 x 18px - konum : x : 1052 / y : 407 - # 949494 ;
6 - boyut: 120 x 18px - konum : x : 968 / y : 445 - # c2c2c2 ;
7 - boyut: 190 x 18 piksel - konum : x : 1003 / y : 483 - #adadad ;
8 - boyut: 24 x 18 piksel - konum : x : 920 / y : 521 - # 949494 ;
9 - boyut: 42 x 18 piksel - konum : x : 963 / y : 521 - # fc6060 .
 
Resmin bu bölümünü bitirmek için, gölge gibi davranacak 420 x 10px bir şekil oluşturun ve pencerenin üst beyaz çubuğunun (3 renkli daire olanları) hemen altında konumlandırın. Renk siyah ( # bdccd4 ) ve daha sonra belirlenen karıştırma modunu için Multiply ve matlık daha düşük %10 .
 

 

 
 YUKARI