SePortal
Üye
Kullanıcı Adı:

Şifre:

Sonraki ziyaretimde beni otomatik kaydet!

Şifremi unuttum?
Kayıt



Site İçinde    


Gelişmiş arama

Ders Bölümleri
Dersler
En Çok İzlenenler
Son Eklenen Dersler
En Çok Beğenilenler
Tümünü Göster

Derslerde Ara


Dönüşümlü 10 Ders
Web Tasarımı - Faydalı Araçlar
PSP - Rollover Image Yapımı
Web Tasarımı - Frame
Araç Kutusu (Toolbox)
Fireworks Geri Almak
Efektler
Ürün Kutusu Yapımı
Katmanlar
PSP - Zincir Yapımı
CSS - Örnekleri

Site Bilgileri
Sitede 27 kategoride, toplam 93 ders,
Toplam 85 indirilebilir dosya, 63.832 kez indirilme,
Sitedeki derslere uyumlu 8 kategoride, toplam 52 link,
Forumlarda 697 konu, 1.406 ileti bulunmaktadır.
Sitede toplam 13.301 kayıtlı üyemiz var. En yeni üyemiz: asz

Şimdiye kadarki en yüksek aktif ziyaretçi sayısı: 311 - Tarih: 21.07.2016 19:15

Toplam ziyaret: 1.934.873
Bugünkü ziyaret: 0

Aktif Kullanıcılar: 1
Şu anda 0 kayıtlı kullanıcı (arasında 0 tanesi gizli) ve 1 ziyaretçi online.
Ana Sayfa / Dersler / Photoshop / Photoshop Örnekleri / Arayüz Yapımı-1

Arayüz Yapımı-1
RSS Feed: Arayüz Yapımı-1 (Dersler)
Eklenme Tarihi: 26.11.2005 - 13:59   (İzlenme: 78719)
Yorumları Oku (3)
Yorum Ekle
Dersi Yazdır / İndir
Yazdır /

Sayfalar:

Web Siteme Hoşgeldiniz
Ziyaretçi Defteri İletişim
Ana Sayfam
Hakkımda
Galerim
Önemli Linkler
Ş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 Offline dewilarda dewilarda at gmail.com
casus
Üye

Kayıt Tarihi: 14.03.2007
Yorumlar: 1
tesekkürler

mutlaka ise yarar sağol..
14.03.2007 13:28 Offline casus tr_34ekrem37 at hotmail.com
**angel**
Ziyaretçi
tsk

emeğinize yüreğinize sağlık teşekkürler..
20.11.2006 15:35  

RSS Feed: Arayüz Yapımı-1 (Dersler)

Google
 
Editörlerimiz | Link Bannerlarımız | Reklam | Site Amacı | Sık Sorulan Sorular | Yasal Uyarı & Kullanım Şartları
Sizden Gelenler | Site Haritası | Dosyalar