Photoshop ve ImageReady, Kalemli Kompozisyon Defterleri için dinamik logolar oluşturuyor

Aug 31, 2023

Mesaj bırakın

Kişisel bir web sitesi oluştururken iyi tasarlanmış, dinamik bir Logo, sayfaya her zaman çok fazla renk katabilir. Belki bazı arkadaşlar Logoyu, Logo etrafında noktalı çizgilerden oluşan ince bir dairenin etrafında yavaş yavaş sürünen bir etki olarak görmüşlerdir, görmemiş arkadaşlar lütfen buraya bakın:

1. Kanvasın boyutunu genişletin.

Logo dosyasını açtıktan sonra görselin tek bir arka plan katmanı bulunuyor ve onun taslağına ihtiyacımız olduğu için tuvali doğrudan o katmanın üzerine genişletemiyoruz. Katmanlar panelinde, Arka Plan Katmanının sağındaki boş alanı çift tıklayın ve arka plan katmanını Katman 0'a dönüştürmek için açılan iletişim kutusunda Tamam'ı tıklayın. Katmanın adına çift tıklayın ve "Logo" olarak adlandırın. Ctrl tuşunu basılı tutun ve panelin altındaki Yeni Katman düğmesini tıklayın. "Logo" katmanının altında yeni bir katman (Katman 1) oluşturun. Ardından "Görüntü → Tuval Boyutu" menü komutunu seçin, iletişim kutusunda uzunluk birimini Piksel olarak değiştirin, Göreceli onay kutusunu işaretleyin, Genişlik ve Yüksekliği 40 Piksel artırın ve Çapanın varsayılan ortasını koruyun.

Bu adımın sonucu olarak tuval dört yönde de 20 piksel daha büyük olur ve bir sonraki adım için yer açılır.

2. Arka planı dolduracak desenler oluşturun.

Beyaz kalem renginde 8×8 piksellik bir dosya oluşturmak için "Dosya→Yeni" menü komutunu kullanın. Görebilmek için Ctrl+"+" tuşlarına birkaç kez basarak dosya görünümünü kolay değiştirilebilecek kadar büyütebiliriz. Dikdörtgen Seçim Aracını seçin (kısayol tuşu M), sol üst köşeye 4 piksellik kare bir kutu çizin, Shift tuşunu basılı tutun ve aynı kutuyu sağ alt köşeye ekleyin. Geçerli ön plan renginin varsayılan olarak siyah olduğundan emin olun; değilse, varsayılana geri yüklemek için D tuşuna basabilirsiniz. Seçimi ön plan rengiyle siyahla doldurmak için Alt+BackSpace tuşlarına basın, ardından seçimi kaldırmak için Ctrl+ D tuşlarına basın.

"Düzenle → Deseni Tanımla" menü komutunu seçin, iletişim kutusunda yeni deseni "Siyah ve beyaz kareler" olarak adlandırın ve özel deseni kaydetmek için Tamam düğmesine basın.

3. Noktalı bir kutu yapın.

Logonun bulunduğu dosyaya geri dönün, Katmanlar panelinde aşağıdaki Katman 1 katmanını seçin, ardından "Düzenle → Doldur" menü komutunu seçin, iletişim kutusunda "Desen"i seçin, "siyah beyaz" seçeneğini seçin Aşağıdaki açılır listede az önce özelleştirdiğimiz "kare" desenini kullanın ve geri kalan seçenekleri varsayılan olarak koruyun.

Belirlendikten sonra Katman 1 katmanı yoğun, düzenli siyah beyaz karelerle doldurulacaktır.

Katmanlar panelinde, boş bir katman (Katman 2) oluşturmak için panelin altındaki Yeni Katman düğmesini tıklayın. Ctrl tuşunu basılı tutun ve ana hatlarını bir seçim olarak yüklemek için "Logo" katmanını tıklayın. "Seç→Değiştir→Genişlet" menü komutunu seçin, iletişim kutusuna 1 girin, Tamam düğmesine basın; seçim dışarıya doğru bir piksel genişleyecektir. Seçimi tersine çevirmek için Ctrl+Shift+I tuşlarına basın. Geçerli Katmanın Katman 2 olduğunu doğrulayın, Ctrl+BackSpace tuşlarına basın ve seçimi arka plan rengi beyazla doldurun. Katman 2 katmanını "Beyaz Kenar" olarak adlandırın. Seçimi kaldırmak için Ctrl+D tuşlarına basın; Logonun çevresinde noktalı bir kutu görebilirsiniz.

4. Her iki taraftaki noktalı çizgileri birbirinden bağımsız hale getirin.

Okuyucular görmüş olmalı ki, evet, bu noktalı çizgi sahtedir, bir sis perdesidir, hareket ettirmek zorsa arka plan deseninin 1 piksel genişliğinde aralıklı açıkta kalan kısımdan geçmesine izin vermektir. Ne yapalım? Her iki taraf için de dört adet arka plan olan duman ve aynaları -- kullanmaya devam ediyoruz. Katmanlar panelinde, Katman 1'i panelin altındaki Yeni Katman düğmesine sürükleyin ve bu katmanın yeni bir katman 1 kopyasını oluşturun. "Siyah beyaz kareler" deseniyle dört özdeş katman elde etmek için iki kopyayı daha tekrarlayın. Tek sütun piksel seçim aracını seçin, görsel görünümünü uygun ölçeğe kadar büyütün, Logonun sol tarafındaki noktalı çizgiye bir kez tıklayın ve noktalı çizginin bulunduğu tüm çizgileri seçin. Katmanlar panelinde Katman1'i seçin ve panelin alt kısmındaki Katman Maskesi Ekle düğmesini tıklayın. Sonuç, bu katman için neredeyse tamamen siyah bir maske olacaktır; yalnızca Logonun solundaki noktalı çizginin olduğu çizgide beyazdır, yani Katman1 katmanı yalnızca o çizgide görünür olacaktır. Daha sonra, aynı prensibi kullanarak, sırasıyla tek satırlı ve tek sütunlu piksel seçim araçlarını kullanarak Logonun üstündeki, sağındaki ve altındaki noktalı çizgileri seçin ve kalan üç desen katmanına sırasıyla maskeler ekleyin. Şu anda Logo yüzeyden değişmiyor, aslında etrafındaki noktalı çizgi kutusu zaten dört parçadan oluşuyor. Bir katmanı gizleyebilir ve durumun böyle olup olmadığını görebilirsiniz. Dört desen katmanını karşılık gelen kısımlarına göre "sol", "yukarı", "sağ" ve "aşağı" olarak adlandırın.

5. ImageReady'de noktalı çizgiyi taşıyın.

Artık hazırlığımızı bitirdiğimize göre ImageReady'de animasyona geçelim. Araç kutusunun altındaki atlama düğmesine bastığınızda, ImageReady otomatik olarak çalışacak ve yeni hazırladığımız dosyayı tüm katmanlar ve maskeler olduğu gibi otomatik olarak yükleyecektir. Animasyon panelinde mevcut görselin otomatik olarak animasyonun ilk karesi haline geldiğini görebilirsiniz. İlk kareyle aynı olan ikinci bir kare oluşturmak için Geçerli Kareyi Kopyala düğmesini tıklayın.

Taşıma Aracını seçin. Katmanlar panelinde "Sol" katmanını seçin ve onu bir piksel yukarı taşımak için ok ↑ düğmesine basın. Ardından katmanı "yukarı" bir piksel sağa, "sağa" katmanı bir piksel aşağıya ve katmanı "aşağı" bir piksel sola taşıyın. Resimde noktalı kutunun saat yönünde kıvrıldığı görülüyor. Animasyon panelinde 2. kareyi 3. kare olarak çoğaltın ve noktalı kutuyu tekrar saat yönünde hareket ettirmek için aynı yöntemi kullanın. Çerçeve 8 bitene kadar işlemi tekrarlayın. Önceki bölümde yaptığımız desenin temel birimi 8 pikseldir, kare başına 1 piksel hareket eder ve sadece 8 kareden sonra tekrarlanabilir.

6. Son Ayarlar.

ImageReady için varsayılan ayar kare başına {{0}} saniyedir, bu sayıyı değiştirmemiz gerekir. Animasyon panelinde Kare 1'i tıklatarak seçin, ardından Shift tuşunu basılı tutun ve 8 karenin tümünü seçmek için kare 8'i tıklayın. Herhangi bir karenin altındaki bekleme süresi açılır menüsüne tıklayın ve tüm karelerin bekleme süresinin 0,1 saniyeye değişmesi için 0,1 saniye seçeneğini seçin.

Özel ihtiyaçlara göre, web tasarımı ve üretiminin ihtiyaçlarına daha iyi uyum sağlamak için noktalı çizgi kutusunun dışındaki beyaz kenarı başka renklerle değiştirebilir veya kesebiliriz.

Tamam, animasyon tamamlandı. Akıllı okuyucular, bu eğitimdeki tüm sürecin görsel bir yanılsamaya ulaşmak olduğunu, fikir net olduğu sürece üretim sürecinin son derece basit olduğunu görmüşlerdir. Fikirlerimizi açtığımız sürece, aynı örnek noktalı çerçevenin çeşitli kıvrımlı şekillerini de yapabilir.

Nihai sonuç şudur:

5. adımda ikinci kareyi kopyalayıp her parçayı doğrudan 7 piksel taşıyabileceğinizi ve ardından Animasyon paneli işlev menüsünde Ara'yı seçtiğinizde yazılımın otomatik olarak ortadaki 6 kareyi oluşturabileceğini unutmayın; bu daha uygun olabilir ancak kare kare hareketi anlamak kadar kolay değil.