Temiz ve Modern Web Sitelerini Tasarlamak için 7 Photoshop İpuçları
Temiz, zarif ve güzel bir web tasarımı genellikle kişisel bir perspektif meselesidir. Her hafta yüzlerce web sitesine bakıyorum ve bunlardan birkaçı bana dikkat ediyor, ancak bunların hepsi etkili değil.
Çok sık tasarımcılar, bir konseptin çok uzağında kaynayarak, metin ve ızgaradan başka bir şey olmayan bir son tasarım üretiyorlar. Bu minimal tasarımlar, özellikle mükemmel tipografi ile eşleştirildiklerinde, estetik bir çekiciliğe sahip olsa da, ihbarda bulunulma riski düşüktür.
Kişisel görüşler bir kenara, temiz ve modern olarak gururla etiketlenmesini ve evrensel düzeyde kullanılabilirliğini ve kullanılabilirliğini geliştirmesini sağlayan bir tasarımın bazı özellikleri vardır. Sadelik bir tasarım trendi değil, iyi bir tasarım niteliğidir.
Photoshop bize derinlik ve ilgi yaratmak için çok yönlü araçlar sunar ve bizi boş bir alan bırakacağımız ince ayrıntılara entegre etmeye davet eder. Modern tasarımın niteliklerini bir düzene sokmak için bu araçlardan sadece birkaçı gerekir. Onlara hakim olarak, işlevselliği açık ve etkili bir şekilde ifade eden temiz tasarımlar yaratabilirsiniz.
1. Boşluk
Beyaz alan, tasarım öğelerinin kutu, çizgi veya ek grafik kullanmadan görsel olarak ayrılmasını sağlar ve modern tasarımın en önemli yönüdür. İçerik sunumu ve okunabilirliği için şarttır. Düzgün kullanıldığında, beyaz alan düzeninize temiz ve zarif bir his verir.
Öğeleri tam olarak konumlandırmanıza yardımcı olması için Kılavuzlar ve Izgaralar Photoshop'ta mevcuttur. Kılavuz tüm kılavuzunuzu kaplarken kılavuzlar manuel olarak ayarlanabilir. Beyaz alanınızı tanımlamak için kullanılan görünmez kenarlıkları, kenar boşluklarını ve dolguyu ayarlamak için yönergeleri kullanın.
Ctrl + R (Win) veya Cmd + R (Mac) tuşlarına basarak cetveli etkinleştirerek bir kılavuz oluşturun ve ardından yönlendirmeyi istediğiniz konuma sürüklemek için üst veya sol cetvele tıklayın. Çalışırken kılavuzları yönetmenize yardımcı olacak bazı ek kısayollar:
- Bir yönerge taşımak için: Ctrl (Win) veya Cmd (Mac) ve kılavuzu tıklayın
- Kılavuzları Göster / Gizle: Hit Ctrl +; (Win) veya Cmd +; (Mac)
- Izgarayı Göster / Gizle: Ctrl + '(Win) veya Cmd +' (Mac) tuşlarına basın
Akıllı Kılavuzlarınızı Görünüm> Göster> Akıllı Kılavuzlar altında etkinleştirin. Akıllı Kılavuzlar, bir şekil çizdiğinizde, metni hizaladığınızda veya bir seçim veya slayt oluşturduğunuzda otomatik olarak görünür ve önceden bu öğeler için yönergeler oluşturma işini kaydeder.
Kılavuzları ve ızgaraları kullanarak nesneleri hizalamak, tasarımınızı sindirmeyi kolaylaştırır ve genel sonuca daha parlak bir görünüm kazandırır.
2. Derinlik
Işık ve gölge ile oluşturulan derinlik, öğelerinizin net ve gerçek görünmesini sağlar. Gölge efektleri herhangi bir nesneye, seçime veya metin katmanına uygulanabilir, ancak numara arka planla eşleşen ve varsayılan siyahı terk eden bir renk seçmektir.
Tüm gölgeler karanlık olmamalıdır. Metin veya form alanları ile batık veya “letterpress” hissi yaratmak için İç Gölge efektini beyaz veya açık renkli bir Gölge ile birleştirin.
3. detay
Hem degrade aracı hem de degrade katman efektleri temiz ve modern tasarımda büyük rol oynar. Gölgeler ve vurgulardan arka plan ve düğmelere kadar modern stilin her alanında gradyanlar bulunur.
Degrade aracına erişmek için Shift + G tuşlarına basın. Bir degrade oluşturmak için, tuvali tıklayın, sürükleyin ve bırakın. Bu araç en iyi arka planlar, ışıklar veya radyal gölgeler gibi geniş alanlar için kullanılır. Bölümler, düğmeler veya simgeler gibi bireysel öğelerle çalışırken, Gradient Overlay katman efekti, yüzey stilleri veya dokuları oluşturmanın daha etkili bir yoludur. Bu araca eleman katmanı çift tıklanarak ve “Gradient Overlay” onay kutusu seçilerek erişilebilir.
Düğmelerinize ve gezinme çubuklarına ince bir boyut kazandırmak veya kağıt veya metallerin stilini ve dokusunu taklit etmek için bu efekti kullanın.
4. Tanım
Kenarları ve sınırları aşırı tanımlayarak, öğelerinizin uygun kontrastı olduğundan emin olursunuz.
Kontur katmanı efekti, her tarafta eşit ağırlıklı bir taslaka ihtiyacınız olan metin veya düğmeler gibi öğeleri ana hatlarıyla gösterecektir. Bu efekti kullanarak, seçeneklerinizi genişletmek için İç ve Alt gölgeleri serbest bırakır.
Düz çizgi ve yatay kurallar çizmek için kalem aracına yönelmek cazip gelebilir, ancak çizgiye degradeler veya gölgeler uygulamak isterseniz, Dikdörtgen Seçim Çerçevesi Aracının arkasında gizlice yerleştirilmiş olan Tek Satır Marquee Aracını kullanmak daha kolaydır. . Tek bir satırdaki Tek Sıra aracını ve öğenin kendisinde bir etki uygulayamadığınız bölüm kenarlıkları veya ayırıcıları boyunca vurgu çizgileri oluşturmak için beyaz veya açık renkli bir alt gölge kullanın.
5. Faiz
Temiz ve modern, eşit sıkıcı, beyaz veya en azına ihtiyaç duymaz. Stil ve marka iletişim kurarken, doku ve desenlerin akıllıca kullanımı tasarımınızı ön plana çıkaracaktır. Parazit (Filtre> Gürültü Ekle) veya arka plan alanlarındaki Doku Yerleşimi katman efektleri veya bunları ayırmaya yardımcı olacak arayüz öğeleri gibi ince teknikler kullanın. Daha gerçek ve anlaşılır bir eleman belirir, izleyiciye daha cazip gelir.
6. Perspektif
Perspektif, modern web tasarımında en çok kullanılan tekniktir, çünkü sürekli trendler sürekli olarak simetri ve ızgaralara odaklanır. Tasarımınızdaki görüntülere ve öğelere perspektif uygulayarak, tasarımınıza derinlik, boyut, modernizm ve ilgiyi tek bir adımda tanıtabilirsiniz.
Sağ tıklama menüsündeki “Serbest Dönüştürme Yolu” seçeneğini seçerek ve araç seçenekleri çubuğunda bulunan “Çözgü” düğmesini tıklatarak herhangi bir şekle veya görüntüye perspektif verilebilir.
Perspektif yanılsaması, asimetrik şekiller veya çerçeveler oluşturarak ve nesneleri birbirinden ayırmak için uygun şekilde degradeler ve gölgeler kullanılarak üretilebilir.
7. Okunabilirlik
Güçlü tip tasarım topluluğuna ve hatta temiz tasarımın daha güçlü bir bileşenine çok sevilir. Bir tasarımı tersine çevirebilecek görüntü ve grafikleri değiştirebilir ve yukarıdaki tekniklerin toplam özünü basit ve anlaşılır bir şekilde iletebilir.
Metne doku eklemek için, önce katmana sağ tıklayıp “Akıllı Nesneye Dönüştür” seçeneğini seçerek metin katmanınızı bir Akıllı Nesneye dönüştürün. Metniniz rasterleştirilmedikçe katman efektleri ile sınırlandırılırsınız; ekran için tasarlarken bile. Akıllı Nesnelere Dönüştürme, metnin daha sonra yazdığı metni değiştirmeniz gerektiğinde düzenleme yeteneklerinizi korurken, filtrelere ve diğer tekniklere metin uygulamanıza olanak tanır.
Metin öğeleri oluştururken kullanabileceğiniz izleme ve karakter aralığı seçenekleriniz olduğunu unutmayın. Metninizin CSS'de yeniden oluşturulmasına rağmen, içeriğinizin size verdiğiniz alanda nasıl görüneceğini daha iyi anlamak için satır ve harf aralıklarını kullanmayı denemeniz gerekir. Ayrıca tanımı ve netliği korumak için “Net” veya “Keskin” metinleri kullanmayı unutmayın.
İçeriğinizi temiz tasarımda nasıl sunacağınız, diğer tüm stillerden daha önemlidir çünkü izleyiciyi dikkati dağıtmak için görsel açıdan daha az şey vardır. Metni ve nesneleri uygun bir şekilde yerleştirmek için yukarıdaki ipuçlarını kullanarak, tanımı ve ilgiyi ekleyin ve içeriği arayüzden ayırın, tasarımınız en iyi etkinliği elde edecektir.
Bu ipuçları hakkında ne düşünüyorsunuz ve düzenli olarak kullandığınız başkalarınız var mı? Lütfen aşağıdan paylaşın…