İçerik
Kalem ve kağıdın yanı sıra, görsel tasarıma eklemeden önce temel yapısını belirlemenize yardımcı olan bir web sayfasının "lo-fi" düzeni olan tel çerçeveler oluşturmak için birçok dijital araç vardır. Tel kafes oluşturma aracınız olarak Photoshop CS6 kullanmanın bir yararı, tel çerçeveyi sıfırdan başlamak yerine ayrıntılı modeliniz için bir temel olarak kullanabilmenizdir.
Çözüm
Aşağıdaki görüntü, hayali müşterimin bana sağladığı "peçete taslağını" ortaya koyuyor, bu da tel kafes sağlamanın bir yolu.
Müşterimle daha fazla konuştuktan sonra, ana sayfa için ek gereksinimleri topladım:
- Müşteri, başlık ve giriş metninden sonra bir "daha fazla bilgi" düğmesi istiyor.
- “İnsanlar ne diyor” alanında ikiden fazla alıntı yapmayacaktır.
- Müşteri, beyaz kutulu bir içerik alanına sahip bir arka plan rengine veya resmine sahip olma fikrinden hoşlanır.
Photoshop'u başlatma ve gerçek boyutları hesaba katan ve biraz daha parlak bir görünüm sağlayan bir tel kafes oluşturma zamanı.
1.100 piksel genişliğinde ve 750 piksel yüksekliğinde 960 ızgara sistemine (ücretsiz örnek bölümlerde bulunan "Photoshop'ta Izgara Ayarlama" adlı bölümde öğrenebileceğiniz) dayalı bir belge oluşturarak başlayın. İsterseniz Boya Kovası Aracını (G) ve arka plan renginin veya görüntüsünün olacağını göstermek için arka planı açık gri renkle doldurun.
Dikdörtgen Aracını Seçin (U) ve içerik alanını temsil edecek bir kutu çizin. 960 ızgara sistemini kullandığım için kutum 940 piksel genişliğinde. Ön plan rengini gri arka planda görünmesi için beyaz yaptım.
İşlemi hızlandırmak için yazın D Ön planı siyaha ve arka planı beyaza ayarlamak için. İçerik alanlarını temsil etmek için siyah kutular çizeceğiz, ardından burada gösterildiği gibi bunların gri görünmesi için opaklığı değiştireceğiz:
Izgaranın ardından, logoyu temsil edecek bir dikdörtgen ekleyin. Dikdörtgeni çizdikten sonra hemen bir opaklık değeri ("30") yazarak dikdörtgenin opaklığını azaltın. Dilerseniz Yazım Aracını kullanarak metin ekleyin (T) kutunun üzerine "LOGO" metnini eklemek için. Gezinme alanını temsil etmek için başka bir dikdörtgen ekleyin ve gri yapmak için opaklık değerini tekrar düşürün.
İçerik sütun alanlarını belirtmeye yardımcı olması için dikdörtgenler eklemek isteyebilirsiniz. Bir sonraki görüntü, biraz daha büyük bir ana içerik sütunu ve ana sayfa görüntüsü için daha küçük bir sütun içeren iki sütunlu bir düzene karar verdiğimi gösteriyor. Sütunlar için opaklığı% 10 olarak ayarladım ve ayrıca sayfanın altındaki altbilgiyi temsil etmek için başka bir dikdörtgen ekledim.
Sütunların içindeki içerik alanlarını temsil etmek için dikdörtgenler çizin. Photoshop'u kullanarak da sahte metin eklemek isteyebilirsiniz. Tür > Lorem Ipsum'u Yapıştır komut. Tamamladığım tel kafes burada görülebilir:
Bunun gibi kaba bir tel kafes yapmak, müşteriye içeriğin sayfada nereye gittiğine dair bir fikir verir, ancak öğeleri hareket ettirmeniz gerektiğinde hızlı ve kolay düzenlemeye izin verir.
Daha fazla nasıl yapılır, örnekler ve zaman kazandıran öneriler için, kitabı daha ayrıntılı olarak inceleyin (veya kitabın örnek bir PDF'sini indirin).
Şimdi, kardeş sitemiz Creative Bloq'daki bu harika ücretsiz Photoshop fırçalarına göz atın.
