İçerik
- Sanal paketleme
- 1. Tuval
- 2. Doku
- 3. Maskeleme 1
- 4. Maskeleme 2
- 5. Parlamasını sağlayın 1
- 6. Parlamasını sağlayın 2
- 7. Parlamasını sağlayın 3
- 8. Ayrıntı ekleyin
- 9. Daha fazla ayrıntı
- 10. Çekirdek
- 11. Siyah yüzük
- 12. Basketbol
- 13. Etkiler
- 14. Daha fazla ayrıntı
- 15. Derinlik
- 16. toparlamak
- 17. Aydınlatma
- 18. Vida kapakları
- 19. Son dokunuşlar
Bu makale ilk olarak web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi olan .net dergisinin 228. sayısında yayınlandı.
İPhone'un 2007'de piyasaya sürülmesinden bu yana, mobil uygulama tasarımına olan talep yukarı doğru gidişatını sürdürdü. Geleneksel olarak bir yaşam için web projeleri üzerinde çalışan birçoğumuz, birdenbire kendimizi yalnızca mobil arayüzler için tasarım sözleşmeleri üstlenirken bulduk.
İPhone SDK'nın piyasaya sürülmesinden bu yana dört yıl geçti ve Android ve BlackBerry gibi diğer platformların pazardaki paylarını köşeye sıkıştırmasıyla, mobil savaşlar yakında sona erecek gibi görünmüyor. Ancak platform ne olursa olsun, tüm bu yazılım parçalarının ortak bir özelliği vardır. Her uygulamanın bir simgesi vardır.
Sanal paketleme
Ambalaj tasarımına benzer şekilde çalışan uygulama simgeleri, genellikle bir satın alma işlemi yapmadan önce gördüğümüz ilk şeydir. Sadece birkaç milisaniye içinde, bu küçük piksel karesinin estetiği, bir indirme veya başka bir uygulamaya bakmak için kaydırarak uzaklaştırma arasındaki farkı yaratabilir.Bu nedenle, bir uygulama simgesi oluşturmanın en iyi yolunu düşünerek zaman harcamak mantıklıdır. İster bir logonun işlenmesi ister daha soyut bir şey olsun, bir simgenin dikkat çekici olması ve ideal olarak kullanıcıya uygulamanın ne yaptığı konusunda iyi bir fikir vermesi gerekir.
Bu eğiticide, kurgusal bir basketbol oyunu için bir uygulama simgesi oluşturmak üzere Fireworks uygulamasını kullanacağız. Gerçekçi dokular simgeleri gerçekten geliştirebileceğinden, fırçalanmış metal efektini taklit etmenin hızlı ve basit bir yolunu göstereceğim ve simgelerinizi gerçekten öne çıkaracak basit ışıklandırma tekniklerini göstereceğim.
1. Tuval
Dosyayı aç Canvas.png. Başlamamıza yardımcı olmak için önceden belirlenmiş ve ayrıca koyu dokulu bir arka plan ekledim. Bu, simgenin kendisinin ayrılmaz bir parçası değildir, bu nedenle eğiticinin sonunda kaldırılabilir, ancak şimdilik onu kazara seçmememiz için yerinde kilitli bırakacağız.
2. Doku
Çapı olan bir daire çizin. 750 piksel. Rengi şu değere ayarlayın: #000000 ve bunu kullanarak tuval üzerinde ortalayın. Hizala araçlar. İçinde Özellikleri panel uygulamak Örgü doku ile 100% opaklık. Filtreler açılır menüsünde şunu seçin: Bulanıklaştırma> Radyal Bulanıklık ve öznitelik miktarını ayarlayın: 45; kalite: 100.
3. Maskeleme 1
Radyal bir bulanıklık uyguladık, bu nedenle herhangi bir şeyi maskelemeden önce daireyi sağ tıklayıp Grup. Yuvarlak bir dikdörtgen çizin 512 piksel dış kılavuzlar arasında yüksek ve geniş; rengi şu şekilde ayarla #FFFFFF. Sarı elmasları kullanarak yarıçapı ikinci kılavuzlara doğru çekin.
4. Maskeleme 2
Maskeyi sonlandırmak için daireyi ve dikdörtgeni seçin ve şunu seçin: Değiştir> Maske> Maske Olarak Grupla. Böylece, uygulama bizim tuvalimizden sıyrılıyor, renk özniteliklerine sahip bir gölge uygulayın: #000000, mesafe: 0, opaklık: 100%yumuşaklık: 22. Artık simgenin dokulu tabanına sahibiz.
5. Parlamasını sağlayın 1
Yeni bir yuvarlatılmış dikdörtgen çizin 512 piksel yüksek ve geniş, onu tuval üzerinde ortalayın ve 3. adımda oluşturduğumuzla aynı yarıçapı verin. Özellikleri panel tıklayın Kategoriyi doldur açılır ve ardından şunu seçin: Gradyan> Koni.
6. Parlamasını sağlayın 2
İçindeki rengi seçin Özellikleri panelinde ve açılır pencerede sol ve sağ renkleri #FFFFFF. + İşaretini görene kadar farenizi renk şeridinin orta noktasının altına getirin ve bir kez tıklayın. Konideki yeni rengi, #666666.
7. Parlamasını sağlayın 3
Koniye, her biri ölçeğin her iki ucundan yaklaşık sekizde bir olacak şekilde iki renk daha ekleyin ve ikisini de # B3B3B3. Parlamayı açı yapmak için gradyan yön kolunu dikdörtgenin sağ alt köşesine doğru çekin. Özellikler panelinde opaklığı şu değere ayarlayın: 65%.
8. Ayrıntı ekleyin
Hala içinde Özellikleri paneline tıklayın Filtreler açılır ve seç Gölge ve Işıma> İç Işıma. Renk özelliklerini ayarlayın: #000000, Genişlik: 5, opaklık: 65%yumuşaklık: 3. İçinde Şekiller araç çubuğunun açılır menüsü seç Tatlı çörek; tuval üzerine bir şekil çiz 435px yüksek ve geniş.
9. Daha fazla ayrıntı
Sağdaki sarı elmasla çörek duvarını kabaca yapın 45px geniş. İtibaren Kategoriyi doldur açılır, seçin Gradyan> Doğrusal. Rengi tıklayın ve açılır pencerede başlangıç rengini ayarlayın. #000000 ve son rengi #FFFFFF. Opaklığı azaltın 40%.
10. Çekirdek
Az önce oluşturduğumuz halkayı çoğaltın, genişliğini ve yüksekliğini şu şekilde ayarlayın: 294px ve sonra onu tuvalde ortalayın. Sağ taraftaki elması tıklayıp orta noktaya kadar tamamen çekin, böylece artık bir duvar (ve artık halka değil) kalmaz.
11. Siyah yüzük
Tuvalin ortasına, eni ve yüksekliği olan son bir halka çizin. 400px. Duvar kalınlığını kabaca yapın 30px ve ona düz bir renk ver #000000. Bu yüzüğün karanlığı, bir sonraki yaratacağımız basketbolu güzel bir şekilde çerçeveleyecek.
12. Basketbol
Kullanmak Şekil aracı bir çemberi ortala 274px tuval üzerinde çap olarak. Radyal bir gradyan, iç renk verin # EC884C ve dıştaki # B8501B. Filtrelerde seçin Gölge ve Işıma> İç Gölge. Mesafeyi ayarlayın: 7, renk: #000000, opaklık 100%yumuşaklık: 30, açı: 35°.
13. Etkiler
Seçiniz Gölge ve Işıma> Alt Gölge mesafe nitelikleriyle: 0, renk: #000000, opaklık 90%yumuşaklık: 20. Filtreleri kaldırarak yeni oluşturduğunuz daireyi çoğaltın. İçinde Renk pop-up dış opaklığı şu şekilde ayarla: 10%; içinde Doku açılır seçim gözleme ve opaklığı şu şekilde değiştirin: 65%.
14. Daha fazla ayrıntı
Kullanmak Dolma kalem araç, bir dizi çiz 6px dikişleri oluşturmak için kalın kavisli siyah çizgiler. Çizgilerinizin düzgün görünmesini sağlamak için Kontur Kategorisi açılır listeden, şu şekilde ayarlanıp ayarlanmadığını kontrol edin: Temel> Yumuşak çizgi. Top kenarlarının üzerinden geçme konusunda endişelenmeyin; bunlar kısa süre içinde maskelenecek.
15. Derinlik
Son adımdaki tüm siyah vuruşları seçin ve bunları birlikte gruplayın. Grubu çoğaltın ve rengi değiştirin #FFFFFF. İçinde Katmanlar panel yeni beyaz çizgi grubunu siyah olanların altına çekin ve ardından tuval üzerinde bunları aşağıya doğru itin. 2px.
16. toparlamak
Dikiş kenarlarını düzgün bir şekilde kırpmak için iki kontur kümesini birlikte gruplayarak başlayın. Düz beyaz bir daire çizin 274px yüksek ve geniş ve doğrudan vuruşların üzerinde ortalayın. Şimdi her iki öğeyi de seçin ve şunu seçin: Değiştir> Maske> Maske Olarak Grupla.
17. Aydınlatma
Bir daire çizin 145px çap olarak ayarlayın ve basketbol topunun sağ üst kısmının üzerine yerleştirin. İç rengi olan radyal bir gradyan verin. #FFFFFF ve dış rengi #FFFFFF. Dış renk opaklığını şu değere ayarlayın: 0% ve sonra genel şekil opaklığını 70%.
18. Vida kapakları
Yeni bir daire çizin, çap 60px ve konumlandır 30px en iyi rehberden ve 30px sol kılavuzdan. İç rengi olan radyal bir gradyan verin. #FFFFFF ve dıştan biri #333333. Dış renk opaklığını yapın 18%genel şekil opaklığı 60%.
19. Son dokunuşlar
İçinde Özellikleri renk açılır, iç rengi renk çubuğu boyunca sekizde bir oranında hareket ettirin. Vida kapağı artık tamamlanmıştır, böylece geriye kalan tek şey onu üç kez çoğaltmak ve bunları simge köşelerine yerleştirmektir. Bitti: Simge ölçeklendirilmeye ve dışa aktarılmaya hazırdır.
Creative Bloq'ta en iyi 20 Photoshop eklentisini keşfedin.
