Öğretici: Bir Chatroom IPhone UI nasıl tasarlanır
Bu derste, bir forum ve sohbet tabanlı mobil uygulama için bir iPhone kullanıcı arayüzü tasarlayacağız.
Uygulama, düğmeler, giriş alanları ve dokunma hareketleri gibi günlük dokunmatik arayüz öğelerinin bir avuç içerir.
Çeşitli Photoshop araçlarını, katman stillerini ve elbette tasarım kısıtlamalarını ele alacağız; Bir iPhone ekranındaki bir yere layık olacak kadar pixel-perfect ve güzel tasarımı yapmak gibi.
Tasarım Photoshop CS5.5 kullanılarak bir araya getirildi, ancak Photoshop'un tüm yeni sürümleri harika bir şekilde çalışacak.
Uygulama ekranı gereksinimleri
Bu derste sadece bir ekran oluşturacağız. Ekran, genel bir sohbet odası gibi, ama telefonunuzda sohbet tabanlı bir uygulama için ana sohbet ekranı olacak. Bu ekranın gereksinimleri:
- Bir başlık - şu anda içinde bulunduğunuz sohbet odası.
- Bir geri / kapat / konular düğmesi - önceki ekrana geri dönmek için.
- Bir kullanıcı düğmesi - bu, şu anda sohbet odasında kim olduğunu gösterir.
- Mesajların bir listesi - mesajların avatar ve zaman damgası olmalıdır.
- Kullanıcı profillerini görüntüleme ve mesajları raporlama yolu.
- Mesajlarınızı yazacak bir metin alanı.
- Mesajlarınızı göndermek için bir gönder düğmesi.
Planlama, eskiz ve wireframing
Herhangi bir kullanıcı arayüzü projesinde olduğu gibi, arayüzünüzü planlamak, eskizlemek ve wireframe etmek önemlidir. Dijital kavramları ve maketleri bir araya getirmeden önce, çoğu zaman aptalca bir fikri (kafanızda aptalca görünmese de) göz ardı eder. Kafanızdaki bir sorunu düzeltmek için mükemmel bir çözüm gibi görünebilir, nihayetinde gerçek uygulamada hiç işe yaramayabilir; bu nedenle, bir projeye başlamadan önce tel örgü yapmak bu kadar önemli bir adımdır.
Kalem ve favori pedinizi alın ve eskiz yapmaya başlayın.
Yukarıdaki görüntüden de görebileceğiniz gibi, üç farklı kavramı bir araya getirerek birkaç dakika harcadım; genellikle bu işlem günler veya bazen haftalar sürer, ancak sadece bir ekran tasarlıyoruz ve uygulamanın amacı basittir, eskiz çekmek uzun sürmemelidir! Çoğunlukla çok benzerler, ancak her birinin kendine özgü farklılıkları vardır, ki aşağıda özetleyeceğim.
A Sketch
İPhone için orijinal Twitter kullanıcı arayüzünden esinlenilen bu kullanıcı arayüzü, kullanıcıların "Profili Görüntüle" ve "Kullanıcıyı Raporla" gibi daha fazla seçeneği görüntüleyebilmeleri için bu ekranda daha fazla içeriğe izin veren eğlenceli ve yer kazandıran bir yöntem sunmasını sağlar. Bu ekranda gezinme çubuğunda bir ayar düğmesi olması fikriyle oynamıştım, ancak normalde “Daha Az Is Daha Fazla” kuralımı takip etmeye karar verdim. Bu, kullanıcının uygulamayı her kullandıklarında ayarlara erişme olasılığı düşük. İşte.
Eskiz B
Bu konsept, “Profili Görüntüle” ve “Kullanıcıyı Bildir” düğmeleri ile mesajların sağında statik simgeler olarak biraz daha kompakttır. Burada “Gönder” düğmesine sahip olma fikriyle oynadım ve bunun yerine iOS klavyesindeki gönder düğmesini kullanıyorum. Buna, çoğu uygulama (mesajlar gibi iOS standart uygulamaları dahil), klavye gönder düğmesinin yanı sıra metin giriş alanının yanındaki ek gönderme düğmesine sahip olduğu için buna karşı karar verdim. Arayüzlerimi App Store'daki diğer kullanıcılarla tutarlı tutmayı seviyorum.
Kroki C
Sketch C, devam etmeye karar verdiğim taslaktır - bir arka tuş yerine yakın bir tuşumuz var. Bence bu tıklamayı tıkladıktan sonra artık o konuşmanın bir parçası olmayacağınızı (mesajlaşma uygulamalarından farklı olarak, geri döndüğünüzden ve daha önceki mesajların tümünü görmeye geri dönebildiğinizden) daha açık bir hale getirdiğini düşünüyorum. Kişiler düğmesi şu anda sohbet odasındaki kullanıcıların listesini gösterir ve kullanıcının kullanıcının profilini görmesine veya raporlamasını sağlamak için daha fazla özellik öğesini (Twitter uygulaması gibi) görüntülemek için slaydı bulundurma fikrini okudum.
Bu bittiğinde, Photoshop'ta bir şeyleri bir araya getirme zamanı!
1. Adım: Durum ve gezinme çubuğu
Bu adımı atmadan önce, belgemizi oluşturmamız gerekiyor. Standart iPhone ekran boyutu (Retina çözünürlüğünde) 640 piksel genişliğinde ve 960 piksel yüksekliğinde ve 326ppi çözünürlükte. Tasarımlarımda her zaman beyaz bir arka planla başlamak eğilimindeyim.
İlk adım, varsayılan iOS durum çubuğunu koymaktır. Durum çubuğu, iPhone'unuzun üst kısmında, sinyal, taşıyıcı, zaman ve pil ömrü gibi önemli bilgileri size bildiren çubuktur. Burada üç seçenek vardır: siyah çubuk, düşük şeffaflık siyah çubuk veya gümüş çubuk.
Uygulama tasarımınızın gerçek anlaşma gibi görünmesini istiyorsanız, durum çubuğunu Retina iPhone GUI PSD kitinden alabilirsiniz. burada bulundu . Sadece PSD'yi indirip açın ve istediğiniz çubuğu PSD belgenize sürükleyin. Tuvalin üst kısmına yerleştirin.
Gezinme çubuğu, yapılacaklar listemizde. Standart gezinme çubuğu 86 pikseldir ve iPhone'unuzun (640 piksel) tüm genişliğini kapsar. Yine, bu öğeyi yukarıda belirtilen PSD kitinden sürükleyebilir veya bunu manuel olarak oluşturabilirsiniz (eklenmiş stiller olmadığı için tercih edilen seçeneğim). Dikdörtgen Şekil Aracını seçin ve tuvalinize 640 x 86px'lik bir dikdörtgen yerleştirin.
2. Adım: Gezinme çubuğu düğmeleri
Tel kafeslerimize geri dönersek, nav çubuğumuzda iki düğmemiz var. Yuvarlatılmış Dikdörtgen Şekil Aracını seçin (her zaman UI tasarımında şekiller için şekil araçlarını kullanmayı unutmayın, daha düşük çözünürlükler için belgemizi ölçeklendirmeyi çok daha kolay hale getirir!). 6px köşe yarıçaplı 100 x 50px boyutlarını kullandım.
Bu şekli, gezinme çubuğunuzun sol ve sağ taraflarına yerleştirin ve güzelce yerleştirin.
3. Adım: Stil seçimi
Tasarım tarzımızı seçmeye başlama zamanı. Bu uygulama insanların sohbet etmesine ve yeni insanlarla tanışmasına ve insanların bunu yapmasına izin vermelerine olanak tanıyacak. Bu nedenle, eğlenceli, ilginç bir renk düzeni ve tipografinin burada bu noktaya ulaşılmasına yardımcı olmak için önemli olduğunu hissediyorum.
Yazım Aracı'nı seçin ve kafanızda bulunan görüntü ile eşleşen bir yazı tipi seçin. Bu kabarcığı seçtim Arial Yuvarlak MT Kalın . Konu adınızı yazın (“UI Design” ı seçtim) ve onu gezinme çubuğunuzda ortalayın.
Uygulama için seçtiğimiz eğlenceli temayı sürdürerek, bazı renkleri seçme zamanı. Ben şahsen kullanıyorum Renk Severler tasarlarken renk seçimlerime ilham vermek için. Bu özel durumda “eğlence” yi aradım ve saniyeler içinde tasarımımın bir temeli olarak kullanmak için pek çok farklı seçenek ve ilham verici palet sundum.
Biri seçmek için bitti Oyun odası . Bir palet seçerken hangi renklere ihtiyacınız olacağını düşünmek önemlidir; Işık bir şey buluyorum, karanlık bir şey, ve parlak bir şey her zaman iyi bir başlangıç noktasıdır. Tasarımınızda iyi bir kontrast olması önemlidir.
4. Adım: Gezinme çubuğu stili
Şimdi navigasyon çubuğumuza geri dönüp, hak ettiği rengi vereceğiz. Gezinme çubuğu katmanını seçin (Umarım katmanlarınızı düzenli tutuyorsunuzdur!), Sağ tıklayın ve Karıştırma Seçenekleri'ni seçin. Piksel mükemmel arayüz tasarımları oluştururken bu en güçlü Photoshop araçlarının evidir. Buradan, bu stilleri diğer katmanlara kopyalayıp yapıştırabilen gölgeler, degradeler, desenler ve stoklar ekleyebilirsiniz.
Öncelikle çubuğumuza bir degrade ekleyeceğiz, böylece Gradient Overlay'i tıklayın. Gezinme çubuğum için kullanmak istediğim turkuaz rengi seçtim. Bu parlak ve güçlü bir yumruk paketi ve tasarımımızı hatırlamamız kolaylaştıracak. Işıktan (üstte) koyu (alt) olacak şekilde 90 derecelik bir açı eğimi uygulayın.
Şimdi Kontur paneline tıklayın. Konturunuzun boyutunu varsayılan 3 yerine 2 olarak değiştirin. Bir ipucu, özellikle mobil cihazlarda UI tasarımında tek sayılardan kaçınmaya çalışmaktır. Bu sadece işin ölçeklendirilmesi söz konusu olduğunda hem tasarımcı hem de geliştirici için daha fazla iş çıkartacaktır (yarım pikselin yarısı kadar bir piksel bulunamaz!).
Konturunuzun dolgu türünü degradeye değiştirin ve konturun şeklin dış tarafında görüneceğinden emin olun. Vuruşunuzun alt kısmı için koyu bir turkuaz rengi seçin ve üst kısım için siyahı seçin. İnme, gezinme çubuğumuzun dışında olduğu için, konturun siyah kısmı durum çubuğunun üstünde gösterilmeyecek ve bu nedenle tüm kullanıcılar görebilecektir ki alt kısımdaki inme.
İç Gölge panelini seçin ve çubuğunuza% 15 opaklık beyaz gölge uygulayın. Bu, çubuğunuzun en üstünde görünecek ve ona daha fazla 3D görünmesini sağlayan güzel bir vurgu sağlayacaktır. Gölgemi 2px'lik bir boyuta ve 3px'lik bir boyuta bıraktım.
Şimdi gezinti çubuğumuzu gerçekten açmanın zamanı geldi. Desenleri kullanarak, tasarımımıza çok fazla derinlik katabiliriz. Gezinme çubuğumda beyaz bir ızgara deseni kullanıyorum. Bu deseni kullanmak isterseniz, ücretsiz olarak bir koleksiyon indirebilirsiniz. Premium Piksel .
Adım 5: tipografi gölgeleme
Tipografimize biraz derinlik katmak için, karıştırma seçenekleri panelini açın ve bir alt gölge uygulayın. Açıyı -90 olarak değiştirin (Global Stili Kullan seçeneğinin işaretli olmadığından emin olun, aksi halde tasarımınızdaki tüm gölgeler -90 olarak değişir) ve gezinme çubuklarınızın inmesi için kullandığınız aynı rengi kullanın. Gölgeye 2px'lik bir mesafe verin ve boyutu 0px'e bırakın. Bu, metninizin üstünde temiz bir damla gölge bırakır ve bu da onu daha ilginç hale getirir.
6. adım: Gezinme çubuğu düğmesi stili
Şimdi gezinme çubukları düğmelerimize bazı harika stiller uygulayacağız. Bu düğmelerin gezinme çubuğumuzla iyi bir bağlantı kurmasını istiyoruz, ancak aynı zamanda kullanıcının düğmeler olduklarını anında anlayabilmesi için yeterince iyi gözükmesi gerekiyor. Bunu yapmak için, onlara 3D, göz kamaştırıcı bir etki vermek için daha fazla katman stili kullanacağız.
Karıştırma seçenekleri panelini açın ve degrade kaplamaya tıklayın. Gezinme çubuğunuzdaki renkleri kullanarak düğmene bir ışık (üst) koyu (alt) geçiş yapın. Açık renk, nav barımın vurgusundan seçildi ve koyu renk, nav barımın alt strokundan seçildi.
Kontur panelini seçin ve konturunuzun boyutunu bir dış konuma sahip 2px olarak değiştirin. Dolgu türünü degradeye ve açıyı 90 dereceye değiştirin. Gezinme çubuğunuz ve düğmeleriniz için kullanılan renklerin üzerine renk koyarak, degrade renklerini ışıktan (üstten) koyuya (alttaki) değiştirin. Hemen hemen bu konturun düğmeninüzü 3D bir görünüm sağladığını göreceksiniz, sanki üstüne oturmak yerine gezinti çubuğundan çıkıyormuş gibi.
Düğmeyi biraz daha yukarıya dikmek ve görsel olarak daha çekici hale getirmek için düğmeye bir iç parlaklık ekleyeceğiz. İç kızdırma paneline tıklayın ve ekrana karıştırma modunu değiştirin. Opaklığı% 20'ye düşürün ve sesin% 0'a ayarlandığından emin olun. Varsayılan sarı parlaklığı beyaz olarak değiştirin ve boyutun 5px varsayılan değerine ayarlandığından emin olun. Bu, düğmenizi güzel bir iç ışıma yapmalı ve düğmeyi gerçekten dokunma hissi vermelidir!
Düğmemizi biraz daha gerçekçi hale getirmek için şimdi bir iç gölge ekleyeceğiz. Opaklığı% 15 olarak değiştirin ve renginiz olarak siyahı seçin. Uzaklığı 2px'e ve boyutu 4px'e bırakın. Şimdi açıyı -90 dereceye değiştirin (Global Işığı Kullan seçeneğinin işaretli olmadığından emin olun). Bu, düğmenizin alt kısmına, uyguladığımız alt iç ışığın bir kısmını gizleyerek, hafif bir gölge verir. Gerçek hayatta, bu alan gölgeli olurdu, bu yüzden iç ışımayı burada saklamak önemliydi.
Düğmemizin stilini bitirmek için bir alt gölge ekleyeceğiz. Alt gölge panelini seçin ve rengi% 25 opaklık ile beyaza değiştirin. Bu gölge vuruşumuzun altında bir vurgu olarak hareket edecek, bu yüzden 4px'e kadar olan mesafeyi değiştirin (inme alanını kaplayacak 2px ve inmenin altında görünecek 2px).
7. Adım: Düğme etiketleri
Etiketsiz bir düğme anlamsız, bu yüzden düğmelerimizi bitirmek için biraz zaman harcayacağız. Her şeyden önce, stilize düğmesine sağ tıklayın ve Katman Stilini Kopyala seçeneğini seçin. Şimdi, stilsiz düğmenize sağ tıklayın ve Katman Stilini Yapıştır seçeneğini seçin.
Önce sağdaki düğmemize devam edeceğiz. Bu düğme “Kişiler” olarak etiketlenecek ve 2+ kişiden oluşan bir simge kullanmak istiyoruz. Bu dersin hatırı için yaratıcı stüdyo Yummygum tarafından yapılan ikonları kullanacağım; Kullandığım paketi bulabilirsin IconSweets.com - Bu paketteki simgeleri öğretici boyunca kullanacağım.
Gezinme çubuğu başlığı için kullandığınız aynı yazı tipini kullanarak, düğme etiketinizi dışarı yazın. Yeniden boyutlandırın ve düğmenizin üzerine getirin ve ardından belgenize istediğiniz simgeyi yerleştirin (veya kendi yapın). Bu iki katmanı düğmenizin üzerine eşit olarak yerleştirin. Katmanlarımın dışına çıktım, böylece her iki tarafın da 15px'i ve düğmenin ve 10px simgesi ve metin arasında. Navlun çubuğu konusundaki metinden katman stilini hem simgenize hem de düğme etiketinize yapıştırın. Düğme uzunluğunuzu yeniden boyutlandırmanız gerekiyorsa, sağdaki 4 bağlantı noktasını seçmek için Doğrudan Seçim Aracı'nı kullanın ve ardından sürükleyin. Bu değişikliği düz tutmak için shift tuşunu basılı tutabilirsiniz.
Bu işlemi, gezinme çubuğunun sol tarafındaki düğmeyle, bu kez bir çarpı simgesi ve “Kapat” kelimesini kullanarak tekrarlayın. Düğmelerime biraz daha fazla stil eklemek için, iki arka plan şeklinin opaklığını% 95'e düşürdüm, bu da onun altındaki ızgara kalıbının biraz parlamasına izin veriyor.
8. Adım: Metin alanı çubuğu
Artık ekranımızın geri kalanına biraz zaman ayırmanın zamanı geldi. Dikdörtgen Şekil Aracını alın ve gezinti çubuğumuzun aynı boyutlarını kullanarak (640 x 86px) tuvalin üzerine bir şekil yerleştirin. Ekranın alt kısmına yerleştirin.
Adım 9: Arka plan
Şimdi tasarımımızın arka planında çalışacağız. Arka plan katmanı için karıştırma seçenekleri panelini açın ve doldurmak için bir desen seçin. İçinden geçen dikey çizgilerle karanlık bir desen kullandım İnce desenler - Burada önerdiğim tam desen setini indirebilirsiniz.
Seçtiğiniz desene kendi renklerinden bazılarını eklemek isterseniz, renk kaplama stilini kullanarak bunu yapabilirsiniz. % 35 oranında kahverengi (daha önce seçtiğim renk paletinden) uyguladım. Bu opaklık, doku / deseninizin rengini veya arka planınızı renklendirecek kadar yüksek göstermesi için yeterince düşük.
Şimdi karanlık bir arka planımız var, navigasyon çubuğumuzun arka plan resmimizle buluştuğu noktayı göreceksiniz. Gezinme çubuğunuza gölge stili uygulayarak bunu kolayca düzeltebilirsiniz; bu, arka planınızın üstünde görünmesini sağlar.
Gezinme çubuğunuz için karıştırma seçenekleri panelini yeniden açın ve alt gölge panelini seçin. Siyahın seçili olduğundan emin olun ve opaklığı% 25 olarak değiştirin. Uzaklığı 6 piksel ve boyu 10 piksele artırın ve Tamam'a tıklayın. Sonuçlar, arka planınız için seçtiğiniz doku / desen rengine ve türüne bağlı olarak değişeceğinden, bu seçeneklerle denemeniz gerekebilir.
10. Adım: Mesajlar
Artık arka planın ve üst gezinme çubuğunun tamamlandığına göre, uygulamanın ana içeriğine odaklanmaya konsantre olacağız. Dikdörtgen Şekil Aracını seçin ve kanvasınıza bir dikdörtgen yerleştirin. Kullandığım genişlik, şeklin her iki tarafında 20 pikselin gösterilmesini sağlayan 600 pikseldir. Daha önce aldığım renk paletinden sarı / krem renginin daha hafif bir sürümünü kullandım.
Yuvarlatılmış Dikdörtgen Şekil Aracını seçin ve boyutları 80 x 80px ve yarıçapı 6px olarak değiştirin. Biçimi (avatar şeklimiz olarak kullanılacak) kasanıza yerleştirin ve doğru şekilde yerleştirin. Tasarımımı tutarlı tutmak için mesaj arka plan şeklimin kenarları ile avatar şeklim arasında 20 piksel kalınmasına izin verdim.
Metin aracını kullanarak isminizi ve mesajınızı yazın; Mesaj metnim için adim ve normal Arial için Arial Rounded MT Bold'u kullandım. Metninizi biçimlendirerek mesaj arka plan kutunuza uygun şekilde biçimlendirin.
Şimdi sadece rengini kullanarak mesajımıza biraz stil ekleyeceğiz; İsmimin rengini karanlık bir turkuazın (siyahın çok yakınında) ve gezinti çubuğumdan esinlenilmiş bir turkuaz rengini değiştirdim.
Ardından Dosya> Yer'ye giderek kendimden bir fotoğraf ekledim. Eklendikten sonra, resmi yeniden boyutlandırdım ve daha önce oluşturduğumuz siyah avatar kutumun üstüne yerleştirdim. Görüntüyü kesmekten ve daha sonraki bir tarihte avatarınızı taşıma veya yeniden boyutlandırma seçeneği sunmak için, sağ tıklayıp Kırpma Maskesi Oluştur seçeneğini belirleyin. Bu avatar resminizi avatar kara kutunuza bağlar ve sadece kara kutunun üzerinde ne olduğunu gösterir. Bu görüntüyü taşıyabileceğiniz ve yeniden boyutlandırabileceğiniz Taşıma Aracı'nı kullanarak bulabilirsiniz.
Başka bir IconSweets simgesi kullanarak, hoş bir küçük zaman damgası oluşturdum. Simge boyutunu küçültmek zorunda kaldım. Bunu, Düzen> Dönüştür> Serbest Dönüştürme'ye giderek ve boyutları değiştirerek (piksel veya yüzde olarak) yapabilirsiniz. Oranları korumak için hem genişlik hem de yükseklik olarak% 70 kullanmıştım. Biraz metin ekledim ve voila. Okunması kolay bir renk seçtiğinizden emin olun, ancak dikkat çekmek için bağırmayın.
11. Adım: Mesajları çoğaltın
Mesaj kutularınızı birbirinizin altına kopyalayın ve her arka plan kutusu arasında 2px boşluk bırakın. Katmanlarınızı Yeni Katman simgesinin üzerine tıklayarak ya da sürükleyerek bunu yapabilirsiniz ya da alternatif olarak Katmanları aynı anda çoğaltmak ve katlamak için Cmd + Shift + Aşağı Ok tuşlarına basabilirsiniz.
İleti kutularınızdaki tüm içeriği, gerçek bir sohbetmiş gibi değiştirin. Arka plan kutularınızı yeniden boyutlandırmanız gerekirse, Doğrudan Seçim Aracı'nı kullanın ve bağlantı noktalarını kullanarak bunları yeniden boyutlandırın. Bu, tüm kenarları güzel ve keskin tutar.
12. Adım: Mesaj stili
Bununla bitti, şimdi mesaj kutularımızı hayata geçirmeye konsantre olabiliriz. Karıştırma seçenekleri panelini açın ve alt gölge panelini seçin. Karışım modunu normal olarak değiştirin ve rengin rengi olarak beyazı seçin. Opaklığı standart% 75 yerine% 80'e arttırın ve gölgeyi 2px'lik bir mesafeye bırakın. Bu, her mesaj kutusu arka planı arasında bıraktığımız 2px boşluğunu gizleyecektir.
Yukarıdaki katman stilini tüm mesaj kutusu arka plan katmanlarınıza kopyalayıp yapıştırın. Yukarıdaki gibi bir şeyle bitirmelisin.
13. Adım: Yuvarlatılmış köşeler ekleme
Tasarımımızı daha ilginç hale getirmek ve daha fazla derinlik katmak için, mesajlarımızın altına yuvarlatılmış köşeler ekleyip daha fazla kağıda yığılmış kağıt gibi görünmesini sağlayacağız.
Yuvarlatılmış Dikdörtgen Aracını seçin ve 10px'lik bir yarıçap verin. Genişliği 600px'e (veya mesaj kutunuzun arka planında kullandığınız genişliğe) ve alt mesaj kutusu arka planınızın yüksekliğini aşmayan bir yüksekliğe değiştirin. Burada parlak bir renk kullandım, böylece kolayca görülebilir.
Doğrudan Seçim Aracı'nı kullanarak, vektör şekli katmanınızın (sadece çizdiğimiz yuvarlak kutu) içeriğini seçin ve Düzenle> Kopyala'ya gidin. Alt mesaj kutusu arka planınızın vektör şekli katmanına tıklayın ve Düzenle> Yapıştır'a gidin. Bu, şekil katmanının içeriğini diğer şekil katmanınıza yapıştırır. Artık, önceki adımda çizdiğimiz şekli silebilirsiniz. Şekli görünür halde görmelisiniz.
Alt mesaj kutusu arka planının karıştırma seçeneklerini açın ve bir alt gölge uygulayın. Rengi siyaha, opaklığı% 25'e, 1px'e ve boyutu 3px'e değiştirin. Bu güzel bir ince damla gölge yaratacaktır.
Bu katmanı çoğaltın ve 5px aşağı doğru bastırın. Katmanı, orijinalinizin altına yerleştirilecek şekilde yeniden konumlandırın. Aşağıya benzer bir şeyle sonuçlanmalısın. Gördüğünüz gibi, bu örtüşen bir kağıt görünümü oluşturmanın basit bir yoludur.
Adımı tekrarlayın, böylece sadece iki yerine üç parça kağıt elde edin. Alt kağıdınızı biraz daha belirgin bir alt gölge vermek isteyebilirsiniz.
Adım 14: Gezinme çubuğu gölgesi
Muhtemelen mesaj kutularımızı tasarlarken, navigasyon çubuğunun arka planımıza döktüğü gölgenin çoğunu sakladık. Bunu değiştirmek için mesajlarınızı gezinme çubuğunun (kolay seçenek ancak gerçekçi olmayan) altına yerleştirebilir veya aşağıdaki adımı tamamlayabilirsiniz.
Dikdörtgen Seçim Çerçevesi Aracını seçin ve iletilerinizin üst kısmına benzer bir sıska çizgi çizin. Yeni bir katmanda siyahla doldurun.
Filter> Blur> Gaussian Blur'a gidin ve bulanıklığı uygulayın. Bu artık bir gölge işlevi görecek - sadece mesaj kutusu arka planınızın kenarlarını örtüşen bulanıklığın herhangi bir parçasını kesin.
Adım 15: Profil ve rapor düğmeleri
Tel kafeslerimize geri dönersek, kullanıcıların daha fazla düğmeyi ortaya çıkarmak için bir mesajı sola kaydırmasına izin vermeye karar verdik. Bu durumda, bu düğmeler kullanıcının mesaj posteri profilini görüntülemesine veya mesaj posterini raporlamasına izin verir.
Mesajlarınızdan birini oluşturan katmanları seçin (Homer Simpsons mesajını seçiyorum) ve vardiya tuşunu ve ok tuşlarını kullanarak mesajınızı 10px'i sola doğru bir seferde canlandırın. Metin aracını kullanarak, etiketlerinizi yazın ve ardından bu etiketlere karşılık gelen bazı simgeler seçin. Profil için bireysel bir kişi seçtim ve rapor için bir hedef seçtim (sanki onları vuruyormuş gibi - bu oldukça eğlenceliydi!).
Bu alana daha derinlik vermek için, hem simgeleri hem de metni siyah bir gölge ekledim.
Adım 16: Metin alanı çubuğu
Metin alanı çubuğu bu ekrandaki en önemli öğelerden biridir. Kullanıcıların mesajlarını rahatlıkla girebilmeleri ve karışıklıklarını girebilmeleri gerekmektedir (bu yüzden ilk çizilen konseptlerde gizli gönder düğmesini kaldırdım).
Başlamak için arka plan katmanınızı bulun ve katman stillerini kopyalayın. Bu katman stillerini daha önce oluşturduğumuz metin alanı çubuğu katmanına yapıştırın. Bu katman için karıştırma seçeneklerini açın ve kontur panelini seçin. Şekerinizin dışına 2px strok uygulayın, renginizde koyu siyahı kullanın. Kontur dışardayken ve şekil brandanın üç kenarına temas ettiğinden, sadece şeklin üstünde olan vuruş görünecektir.
Şimdi iç gölge sekmesini seçin ve karışım modunu normal, rengi beyaza, opaklığı% 10 ve mesafeyi 2px olarak değiştirin. Açının global ışık varsayılanına (90 derece) ayarlandığından emin olun ve Tamam'a tıklayın. Bu bize siyah vuruşumuzun altında güzel bir vurgu yapar. Bu iki basit 2px satırı uygulandığında, metin alanı çubuğumuz arka planın geri kalanıyla zaten aynı arka plana sahip olmasına rağmen iyi bir şekilde ayrılmış görünüyor!
Yuvarlatılmış Dikdörtgen Aracını seçin. Aracınıza yüksek bir yarıçap verin, 50px kullandım; Bu çok yuvarlak (dairesel) uçları verecektir. Çubuğunuza bir şekil yerleştirin, boyutlarım olarak 460x54px kullandım. Tasarım aralığını tutarlı tutmak için metin alanınızın sol tarafının tuvalin sol tarafından 20px uzağa getirildiğinden emin olun.
Şekli koyu bir renkle doldurun (arka planda koyu bir pikselden seçilen bir kahverengi kullandım) ve sonra katman stilleri panelini açın. Metin alanınıza% 10 opaklık ile 2px beyaz gölge uygulayın.
İç gölge paneline tıklayın ve metin alanınızın şekline bir iç gölge uygulayın. Bu, daha fazla derinlik verir ve çubukların arka planına kesilmiş gibi görünmesini sağlar. Çoklu harmanlama modu ve% 25 opaklığı olan siyahı kullanın. Burada deney yapmak isteyebilirsiniz, ancak mesafe olarak 10px ve boyut olarak 10px kullandım.
Metin aracını kullanarak ve Arial Rounded MT Bold ile donatılmış, “Yorum yaz…” yazın ve metin alan kutusuna yerleştirin. Yeni metin katmanınız için karıştırma seçeneklerini açın ve% 75 opaklık, 2px ve 3px boyutunda siyah bir gölge uygulayın.
Adım 17: Metin alanı düğmesi
Yuvarlatılmış Dikdörtgen Şekil Aracını tekrar seçin ve daha önce kullandığımız aynı yarıçapı ayarlarını ve yüksekliğini kullanarak, metin alanı çubuğu arka planınıza bir şekil yerleştirin. Düğmenizin uzunluğunu, metin alanınızdan 10px ve tuvalin sağ kenarından 20px kalacak şekilde yeniden boyutlandırın.
Yeni düğme şekli katmanınıza sağ tıklayın ve karıştırma seçeneklerini seçin. Degrade kaplama panelini seçin ve ışıktan (üstteki) koyu (alt) bir degrade uygulayın. Daha önce seçtiğim renk paletindeki muhteşem sarı rengi kullandım.
Tasarımımızı tutarlı tutmak için, düğmemize, gezinme çubuğundaki düğmelerde yaptığımız gibi arka plandan geliyormuş gibi görünmesini sağlayan bir kontur uygulayacağım. Bu sefer, arka plan çok daha koyu ve bir degrade ile doldurulmadığında, bir degrade konturu yerine katı siyahı kullandım. % 100 opaklık ile şekilimin içinde 2px vuruş kullandım.
Metin aracını seçin ve düğmelerinize “Gönder” yazın. Yeni metin katmanınız için karıştırma seçeneklerini açın ve metninize 1px boyutunda ve 3px boyutunda kahverengi bir gölge uygulayın.
Ve bittiğinde, hepimiz bitti! Sonuçlarınızı görmeyi çok isteriz, lütfen bunları aşağıdaki yorumlar bölümünde paylaşabilirsiniz. Tasarımı tam çözünürlükte görmek isterseniz, bunu görebilirsiniz. İşte .