Arayüz Yapımı-1

Sayfalar: Sayfa Atla Sayfa [ Arayüz Yapımı-1- 1] Sayfa [ Arayüz Yapımı-1- 2] Sayfa [ Arayüz Yapımı-1- 3]

Şimdi Logomuzu yapalım. Örneğimizde alt alta 4 tane buton olduğundan 4 tane de (buton, buton 2, buton 3, buton 4) buton Layer Set imiz var. "buton 4" Layer Set'i tıkladık. Layer Penceresinin alt tarafındaki ikonuna tıklayarak Logo adında yeni bir Layer Set yarattık. Bu Layer set'in içine de yeni bir Layer yarattık (Layer 17). Elliptical Marquee Tool ile dökümanımızdaki arayüzün zemininin sol köşesine, 75 pixel çapında bir daire çizmek için seçili alan yarattık. Araç Kutusundaki Palette ikonu ile default palet renklerini seçtik. Gradient Tool ile ve bu defa Araç Seçenekleri Çubuğunda 2. sırada bulunan Radial Gradient'i seçerek shift tuşunu basılı tutarak sağ üst köşeden sol alt köşeye doğru 45 derecelik bir açı ile çizgi çektik. Select>Modify>Contract ile Contract: 4 vererek yeni bir seçili alan yarattık. Tekrar yeni bir Layer yarattık (Layer 18). Palette üst renk olarak, A3D39C ve alt renk olarak, 005E20 renk kodlarını verdik. Gradient Tool ile yukarıda anlattığımız aynı uygulamayı tekrarladık. Edit>Stroke ile Width: 1 değerini vererek Stroke uyguladık. Layer 17 'ye de gölge uygulamak için; Önce Layer 17'ye tıkladık, sonrada Layer 17'yi seçili hale getirmek için Ctrl tuşuna basılı tutarak tekrar tıkladık. Yeni bir layer yarattık (Layer 19). Layer 19'u sol tuş ile tutarak Layer 17'nin altına sürükleyerek taşıdık (Layer Order). Select>Modify>Expand ile Expand değerini 3 vererek OK dedik ve seçili alanı 3 pixel genişlettik. Şimdi bu alanı boyayacağız, Edit>Fill ile açılan Fill Penceresinden Use: kısmındaki açılır menüden Black'ı seçtik, OK dedik. Ctrl+D ile de seçimi iptal ettik (Deselect). Filter>Blur>Gaussian Blur Penceresinde Radius değerini 2,2 olarak verip OK dedik ve gölgemizi tamamladık. Şimdi Logo butonumuzun üzerine Logo yazımızı yazacağız. Hatırlayacağınız gibi yazımızın Layer 18'nin üzerinde olması için Layer 18'yi tıkladık. Yazımızın rengini seçmeliyiz. Swatches Penceresinden yine beyaz (White) rengi seçtik. Sonrada Araç Kutusundan Yazı Aracı (Type Tool-T)'nı seçtik. Araç Seçenekleri Çubuğundan yazı font'u olarak Arial MT'i seçtik ve Logo olarak yazdık. Dikkat ederseniz Logo yazısının bulunduğu Layer, Layer Penceresindeki Layer 19'un üzerinde kendiliğinden oluştu. Logo Layer'inin üzerine çift tıkladık. Araç seçenekleri Çubuğundaki ikonuna tıklayarak Wrap Text pencersini açtık ve buradan da Bulge'yi seçip OK dedik. Gölge vermek için ise Logo yazılı Layer'e sağ tuş ile Dublicate Layer'i seçerek Logo copy layerini oluşturduk. Yazı Paleti Aracında Color: bölümüne tıklayarak Color Picker deki # bölümüne 000000 renk kodunu vererek siyah rengi seçtik ve OK dedik. Aynı Layerde iken tekrar Araç Çubuğundan Move Tool aracını seçerek klavyemizdeki oklar yardımıyla 1 pixel sağa ve 1 pixel aşağı kaydırarak yazımıza gölge vermiş olduk. Logo copy Layer'ına tıkladık ve yeni bir layer yarattık (Layer 20). Araç Kutusundan Fırça (Paintbrush Tool-B) araçını seçtik. Yukarıdaki Araç Seçenekleri Çubuğundan Brush: değerini 13 (Soft Round 13 pixels) olarak seçtik. Logo butonumuzun sağ üst köşesine tıkladık. Böylece Logo butonumuzu da tamamladık. Sizler hazırladığınız arayüz (interface) üzerine değişik desenler ve yazılar ekliyebilirsiniz. Biz de bir kaç ekleme yaparak örnek arayüzümüzü tamamlamış olduk. Sıra geldi hazırladığımız arayüzü parçalara ayırıp butonlara linkler verip web sayfamıza yerleştirmeye... Şimdi bu işlemi çok kolay bir şekilde yapacağız. Araç Kutusundan Dilimleme Aracı (Slice Tool-K)nı seçtik. Daha sonra link vermek istediğimiz butonların, yazıların, şekillerin üzerine gelip istediğimiz gibi sürükleyerek seçli alanlar olan Slice bölümlerini oluşturduk. Bu bölümleri oluşturduktan sonra yine Araç Kutusundan bu defa Slice Select Tool (Dilimleme Seçim Aracı) ile daha önceden seçtiğimiz alanların üzerine çift tıklayarak açılan Slice Options Penceresinden URL: kısmına link vereceğimiz adresi, Target: kısmına Sayfanın açılma şeklini, Alt Tag: kısmına da mouse üzerine gelince browser penceresi alt tarafında oluşacak mesajımızı yazıyoruz. Slice ile işaretlediğimiz bütün parçalara bu işlemi tek tek uyguladıktan sonra File>Save for Web ile açılan pencereden OK diyerek, nereye kaydetmek istiyorsak seçerek hem HTML olarak hemde Photoshop'un kayıt sırasında kendisinin otomatik oluşturacağı "images" klasörü içine Slice Aracı ile dilimlediğimiz dökümanın parçalarını .*gif formatında kaydedebiliriz. Daha sonra kaydedilen HTML sayfasının kodlarını alıp, web sitenizin HTML kodları arasına yerleştirebilirsiniz. Son olarak da dökümanımızı PSD formatında kaydetmeyi unutmayalım ki daha sonra üzerinde istediğimiz değişikliği rahatça yapabilelim (File>Save). Slice seçimlerini döküman üzerinde görmemek isterseniz View>Show Extras'ın yanındaki işareti kaldırın (Ctrl+H). İlk Arayüz(interface)müzü yarattık. Bütün bu anlatılanları daha iyi anlamak için bu uygulamaları Photoshop 'u açarak sabırla adım adım sıra ile yapmanızda fayda var. Aksi halde size çok sıkıcı gelebilir.

Yazan: Yorum: dewilarda Üye Kayıt Tarihi: 03.04.2007 Yorumlar: 1 tsk sagol bu site super 1 site çok önceden kaydoldum ama gırmıodum neyse butun sıteye tesekkurler emege saygı 02.06.2007 14:33 casus Üye Kayıt Tarihi: 14.03.2007 Yorumlar: 1 tesekkürler mutlaka ise yarar sağol.. 14.03.2007 13:28 **angel** Ziyaretçi tsk emeğinize yüreğinize sağlık teşekkürler.. 20.11.2006 15:35

	Arama terimlerinizi girin Arama formu gönder
	Web www.aeystudio.com