Photoshop'ta Tasarım Web 2.0 Arayüzü

Aşağıdaki öğreticiyi anlamak, onun tekniğini anlamaktır, onunla bir web sitesi için kendinize grafiksel bir kullanıcı arayüzü çizebilirsiniz.. Yan gezinti, düğmeleri, başlıkları, Örneğin. Tüm Web 2.0 tarzı.

Yeni bir tuval başlatın; herhangi beden. 450x300 pikselden daha büyük bir şey iyi olurdu. Seçin Yuvarlatılmış Dikdörtgen Takım ve yukarıdaki resimde gösterildiği gibi büyük bir dikdörtgen çizin.

Yuvarlatılmış Dikdörtgen katmanına çift tıklayıp Karıştırma seçenekleri. Aşağıdaki stiller için ayarları değiştirin.

Düşen gölge

Opaklık:% 31 Mesafe: 1 piksel Yayılma: 0% Boyut: 5 piksel

Konik ve kabartma

Derinlik:% 100 Boyut: 0 piksel Yumuşat: 0 piksel

Gradiant Yerleşimi

Gradiant'a çift tıklayın ve aşağıdaki durma noktalarını ayarlayın. Yer:% 0, # 1378cd Konum:% 100 # 4da5f0

inme

Boyut: 5px Pozisyon: İç Renk: # 54abf6

Biraz metin, bir etiket satırı, URL veya başka bir şey ekleyelim. Ortada ve sağa doğru hizalayın, böylece logo daha sonra solda kalabilir. Metni düzenleyelim. Lucida Sans Unicode kullanıyorum; 55pt; düz; Karakter takibi için -120 (harf aralığı). Metin katmanına çift tıklayın ve aşağıdakileri ayarlayın. Karıştırma seçenekleri.

Degrade Yerleşimi

Gradiant'a çift tıklayın ve aşağıdaki durma noktalarını ayarlayın. Yer: 0%, # 9ec7eb Konum: 100% ecf6ff

Ardından logoyu metnin sol tarafına yerleştirmeniz gerekir. Logoyu temsil etmek için 5px yarıçaplı yuvarlatılmış bir dikdörtgen kullanacağım. Burada Karıştırma seçeneği yuvarlatılmış dikdörtgen için ayarlar.

İç gölge

Opaklık:% 45 Mesafe: 0px Boyut: 43px;

Konik ve kabartma

Derinlik: 100% Boyut: 0px Yumuşat: 0px Vurgu Modu Opaklığı:% 50 ShadowMode Opaklığı:% 100

Gradiant Yerleşimi

Gradiant'a çift tıklayın ve aşağıdaki durma noktalarını ayarlayın. Yer:% 0 # 0e2f4a Konum:% 47 # 001a31 Konum:% 48 # 002545 Konum:% 100 # 0f4b7f

inme

Boyut: 5px Gradiant'a çift tıklayın ve aşağıdaki durma noktalarını ayarlayın. Yer:% 0 # 1468af Konum: 100% # 50abf8

Biraz parlak bir etki verelim. Ambar CTRL ve yuvarlatılmış dikdörtgen üzerine sol tıklayın Katman Küçük Resmi. Tüm yuvarlatılmış dikdörtgen seçildiğinde, Dörtgen İşaretleme Aracı, ambar ALT ve seçilen alanın ikinci yarısını çıkarır; sadece yukarıdaki görüntüdeki gibi.

Yeni bir katman oluşturun; Tüm katmanların üstünde oturacak şekilde yukarı sürükleyin; seçilen kısmı beyazla doldurun [#ffffff]; opaklığı% 15 olarak değiştirin.

Öğretici burada bitecek. Bu tasarımdan nasıl yararlanacağınız tamamen size bağlıdır. Boyutunu ve renklerini biraz değiştirerek, bir web başlığı veya düğmeleri olarak kullanılabilir. İşte bazı örnek.

Web sitesi başlığı

Web sitesi düğmeleri