İTÜ SEM Web Sayfası Tasarımı

Transkript

1 İTÜ SEM Web Sayfası Tasarımı Kursu PhotoshopCS Ders Notları Hazırlayan:Araş. Gör. Kerem ARSLANLI Taşkışla 2005

2 Photoshop CS Web sayfanızın arayüzünü tasarlamak için kullanacağımız programda öncelikle sayfa boyutunu belirtmemiz gerekli, bunun için 600x800 yada 1024x768 çözünürlük seçilebilir. Web kullanıcıları genellikle ekran görüntüsü olarak 1024x768 çözünürlük kullanırlar tabi bu alanın içerisinde tam görüntülenecek alan biraz daha küçük olduğundan 600x800 ü tavsiye edebilirim. Ekrandaki ayarlardan 72dpi(Dots Per Inch) ve 8bit RGB (Red-Green- Blue) olmasına özellikle dikkat etmelisiniz. Bu ayarları oluşturduysak çalışma alanına geçebiliriz

3

4

5 PhotoshopCS Genel Bakış A B C E D A:Options Paneli, B: Tools Paneli, C: Navigation Paneli, D: Layers Paneli, E: Çalışma Alanı

6 Sayfayı açtıktan sonra yardımcı bileşenleri CTRL+K ile açılan pencereden Guides Grid bölümünden düzenliyoruz. Grid,Guides ve Cetvel Ayarları

7 Grid Ayarları Grid ayarlarınızın dosyanız üzerinde eşit olarak görüntülenmesine özen gösterirseniz ileride Slice kısmında zorlukları atlatmış olursunuz.(en azından 600x800 ekran için bir bölünme bulunabilir)

8 Grid ve Guides Kullanımı CTRL+H ile açıp kapatabildiğimiz bu özellikler web sayfamızı tasarlarken Işimizi oldukça kolaylaştırıyor. Cetvelin üzerine geldikten sonra sürükle-bırak yaparak Guide çizgilerini ekrana getirebiliyoruz. Eğer ekranda cetvel yok ise view menüsünden ya da CTRL+R ile aktif hale getirebilirsiniz.

9 Tools Paleti Rectangular Marquee Tool (M) Lasso Tool (L) Crop Tool (C ) Healing Brush Tool (J) Clone Stamp Tool (S) Paint Bucket Tool (G) Eraser Tool (E) Blur Tool (R ) Path Selection Tool (A) Pen Tool (P) Notes Tool (N) Hand Tool (H) Move Tool(V) Magic Wand Tool (W) Slice Tool (K) Brush Tool (B) History Brush Tool (Y) Paint Bucket Tool (G) Dodge Tool (O) Type Tool (T) Rectangle Tool (U ) Eye Dropper Tool (I) Zoom Tool (Z) Foreground Color FullScreen Modes Edit in ImageReady (CTRL+SHIFT+M)

10 Tool Paleti Açıklamaları Move Tool (M): Objeleri hareket ettirmek Için kullanılır. Aktif iken CTRL+T ile Seçili Katmanlardaki objeleri Free-Transform yapılabilir Magic Wand Tool (W): Ekranda aktif olan katmandaki objelerin üzerine tıklandığında belirli renkte olan piksellerin seçilmesini sağlar.(mesela resim içerisinde sadece mavi renkteki pikselleri seçmek istediğinizde bu tool kullanılabilir) Slice Tool: Ekranda Tasarımı tamamladıktan sonra parçalara ayırarak web sayfası olarak tanımlamaya yarar. Bu kısımda imageready üzerinden de işlenecektir. Brush Tool: Fırça Presetlerini kullanarak ekranda istenilen görüntüyü yaratmak Için kullanılır, düzgün çizgiler çekmek Için SHIFT tuşuna basılı tutarak çizim yapılmalıdır Healing Brush Tool: Resim üzerindeki hatalı yada bozuk gözüken pikselleri düzeltmede kullanılır

11 Tool Paleti Açıklamaları PaintBucket Tool: Objelerin içini seçilen renk ile doldurmada kullanılır Dodge Tool: Resim üzerine tıklandığında alanların rengini açar. Text Tool: Ekranda yazı yazmak Için kullanılır. Rectangle Tool: Kare,Dikdörtgen,Oval,Daire yada özel şekilleri çizmede kullanılır. Alt bileşenlerini aktif hale getirmek Için ikonun sağ alt köşedeki noktaya tıklayarak basılı tutmak gerekir. EyeDropper Tool: Resimin istenilen noktasındaki pikselin rengini belirlemeye yarar. Zoom Tool: Ekranda Yaklaşıp uzaklaşmayı sağlar. Bu özellik CTRL+Artı(+) yada CTRL+Eksi (-) ile de aktif hale getirilebilir.

12 Tool Paleti Açıklamaları Rectangle Marquee Tool: Ekrandaki Aktif katman Içerisindeki objelerin piksellerini seçmede kullanılır. İkon üzerine basılı tutulduğunda alt bileşenler seçilebilir hale gelir. Lasso Tool: Resmin belirli bir kısmını seçmede kullanılır Rectangle Marquee tooldan farkı daha serbest seçimler yapılabilmesidir. Crop Tool: Resmin belirlenen yerden kesme Işlemi Için kullanılır. HealingBrush Tool: Resmin bozulmuş olan kısımlarının düzeltilmesini sağlar. CloneStamp Tool: Resmin istenilen bölgesindeki kısımları kopyalamaya yarar. Eraser Tool: Ekranda istenilen piksellerin Silme Işlemini gerçekleştirir. Ayrıca Background Eraser ve Magic Eraser özellikleri de alt bileşenler olarak mevcuttur

13 Tool Paleti Açıklamaları Blur Tool: İstenilen noktayı daha flu yapar.sharpen ve Smuggle alt bileşenlerini içerir. Bunlar Resmi sırasıyla Daha keskin ve dağınık hale getirirler. Path select Tool: Daha önceden yaratılan çizim pathlerini seçme ve değiştirmede kullanılır. Pen Tool: Eğrisel formda alanlar yaratmada kullanılır. Note Tool: Not almaya yarar. Hand Tool: Resimin ekranda kaydırmayı sağlar. SPACE tuşuna basılı tutularak da ekranda aynı işlem gerçekleştirilebilir. Foreground Background Tool: Ekranda Ön ve Arka alan renklerinin değiştirilmesini sağlar. Ok tuşuna basılarak renkler arasında hızlı geçiş sağlanabilir.

14 Layers Paneli Katman Renk ve Geçirgenlik Ayarları Katmanı Kilitleme Katman Şeffaflık Yüzdesi Katman Dolgu Rengi Yüzdesi Katmanı Ekranda Kapama-Açma Katman Efekt Ayarları Katman Sil Katman Maske Ayarları Yeni Katman Seti Yeni dolgu Katmanı Yeni Katman

15 History Paneli O Ana kadar yapılmış islemlerin tümü Gelinen noktaya kadar olan komutları kullanarak yeni döküman yaratma O Ana kadar olan bölümden anı yakalama (Snapshot) History silme

16 Color Paneli Renk Paletinden RGB tonlama sisteminde istenilen renk seçilerek Işlem yapılır RGB renk tonları Kod olarak biliniyor ise bu kısımdan girilerek istenilen renk seçilebilir Ana bölümden renkler arasında hızlı geçiş sağlanabilir

17 Info ve Navigation Paneli Çalışma alanını tamamında istenilen noktaya hızlı ulaşmanızı sağlar Dosya ile ilgili bilgilere alt menülerden ulaşılabilir Kaydırma çubuğunu hareket ettirerek ekrana yakınlaşıp uzaklaşabilirsiniz

18 Move Tool Özellikleri Photoshop ta katmanlardaki objeleri yanlızca kendi aralarında hizalatabilirsiniz. Hizalama Işlemi objeler seçildikten sonra options panelinde aktif hale gelecektir Çalışma alanını tamamında istenilen noktaya hızlı ulaşmanızı sağlar Ayrı katmanlardaki resimleri hizalamak Için önce katmanlar göz ikonunun yanındaki boşluğa tıklanarak bağlanır. ardından hangi katman aktif ise ona göre diğer katman hareket eder. Kaydırma çubuğunu hareket ettirerek ekrana yakınlaşıp uzaklaşabilirsiniz

19 MagicWand Tool Özellikleri Tıklanılan alanları seçime dahil eder Tıklanılan alanları seçimden çıkartır. Tıklanılan alanların kesişimini seçime dahil eder Tıklanılan alanda tolerance değerini değiştirerek ne kadar hassa bir seçim yapacağınızı ayarlayabilirsiniz Ayrıca Seçime katılan alanları Arttıtabilir, çıkartabilir, kesişimlerini seçtirebilirsiniz

20 Slice Tool Özellikleri Tıklanılan alanları parçalar Tıklanılan alanları belirli bir oranla parçalar. Tıklanılan alanların belirli bir boyutta parçalar Guideları kullanarak resmi parçalar Alanları parçalamak Için kullanılan Slice tool bunlardan daha sonra bir HTML dosyası oluştuğunda tabloları slicelara göre oluşturur. Bu alanlarda herhangi bir çakışma ya da ekranda eksik kalan alan olmamalıdır.

21 Brush Tool Özellikleri Fırçanın Tipi Fırça Için renk Modları Fırçanın Renk Geçirgenliği Fırçanın tıkladıktan sonra ne kadar etkin boya bıraktığı Hava püskürtmeli fırça özelliğinin açma kapama butonu Fırça Özelliği ile ilgili gelişmiş parametreleri Brushes preset toolbarından açabilirsiniz. Buradaki parametreleri değiştirerek istediğiniz şekilde fırça oluşturmanız mümkündür.

22 Brush Tool Özellikleri Yeni fırçalar eklemek Için brush panelinin sağ tarafındaki ok ikonuna tıklayarak açılan pencereden farklı fırçalar yükleyebilirsiniz. Eğer eski haline getirmek isterseniz Reset Brushes a tıklamanız yeterlidir.

23 Paint Bucket Tool Özellikleri Boyanacak Olan Kısım Foreground(Önal an) yada Pattern (Doku) Dokunun Hangi Mode olacağı Geçirgenliği Tıklandığında ekranda etraftaki piksellerin ne kadar tolerans tanıyacağı ( Bu değer büyük olursa boyanan alan da o kadar büyük olur)

24 Dodge Tool Özellikleri Fırça tipi seçilir Resmin üzerinde tıklandığında etkili olacak renk bileşenleri seçilir Ne kadar etkili olacağı % olarak seçilir Dodge Tool sayasinde resimlerin istenilen kısımlar daha açık yapılabilmektedir.

25 Text Tool Özellikleri Font Belirlenir Kalın yada italik özellikleri atanır Font büyüklüğü belirlenir Fontun ekranda nasıl görüneceği belirlenir Eğri formda yazı yazmak Için Yazıları yazdıktan sonra ekranda harfler arasındaki aralıklar bu panelden ayarlanabilir Font basıklık derecesi Fontun Superscript derecesi Fontun Üst satırla arasındaki mesafe Harflerin arasındaki aralık Yazının kendi büyüklüğü Dik Yada Mask Olarak yazı yazmak Için text ikonun alt köşesine tıklanır.

26 Rectangle Tool Özellikleri Shape özelliği seçilmelidir. Ekranda oluşturulacak şekil buradan da seçilebilir Şekil oluşturulurken her bir tıklama yeni alanda şekile katılabilir yada çkıkartılabilir Bir stil belirlenebilir Şekil Oluşturulduktan sonra üzerinde Işlem yapabilmek Için rasterize edilmesi gerekir. Bunun Için katmanın üzerine sol tıklanarak açılan pencereden seçilebilir Custom Shape tool seçilerek özel şekiller ekranda oluşturulabilir

27 Marquee Tool Özellikleri Birden fazla seçim yapılırsa bunların eklenme yada seçili alandan çıkarma şeklinde ekrana getirir Seçilen alandan belirilen piksel kadar Içeride yumuşak geçiş yaparak kesecektir Seçim Alanını belirli bir piksel oranında ayarlanabilir Marquee özelliği kullanışlı, ekranda aktif olan katmanlardaki objeleri seçmemie yarayan bir Işleve sahiptir. Single row ve single column 1 piksellik bir seçim yapabilmemizi sağlar. 0 px Feather ile 50 px Feather ile

28 Lasso Tool Özellikleri Kement özelliği sayesinde resimleri istediğimiz gibi kesebiliriz Feather değerini arttırarak geçişlerdeki keskinliği azaltabiliriz. Polygonal lasso tool herzaman daha kullanışlıdır. magnetic Lasso bir mıknatıs gibi benzer renklerin etrafından seçim yaptırabilirsiniz ama bunun Için renkleri keskin olarak birbirinden ayrılmış dosyalarda çalışmanızı öneririm 0 px Feather ile 50 px Feather ile

29 Crop Tool Özellikleri Seçilen alanın Işlemden sonra silinmesi yada saklı kalmasını ayarlanır Crop ile seçilen alanın rengini ve geçirgenliğini buradan ayarlayabilirsiniz Crop Tool kullanarak resimleri kadrajlayabilir istemediğimiz kısımlarını çıkartabiliriz

30 Healing BrushTool Özellikleri Efektin uygulanacağı fırça tipini belirler. Brush renk Modları belirlenir Kaynak olarak pattern (doku) yada ekran dokusu alınabilir Ekranda resmin bozuk kısımlarını onarmada yada belirlenen dokuları kopyalamada kullanılır. öncel hedef nokta CTRL tuşuna basılı tutularak noktaya tıklanır, daha sonra hedef noktaya tıklanarak ilk tıklanan kısımdaki dokular kopyalanmış olur.

31 Patch Tool Özellikleri Seçilen alanın eklenme, çıkarma, kesişim şeklinde belirlenmesini sağlar Seçilen alanın yada hedef alanın değişmesini sağlar Doku (Pattern) kullanılarak fırça Için desen seçelebilir Resim Üzerinde Alan seçildikten sonra kapalı alanın ortasından tıklanarak kopyalanmak istenilen alanın üzerine sürüklenir.

32 Color Replacement Tool Özellikleri Fırça özelliği belirlenir Seçilen Sample Renklerin Tek yada devamlı değişken olmasını sağlar Sample doku Için limitleri düzenler CTRL tuşuna basılı tutularak kaynak renk seçilir, daha sonra hedef üzerine tıklanarak boyama Işlemi yapılır. Find Edges Modunda Find Edges Modunda

33 Mode Özellikleri Layers ve birçok panelde karşımıza çıkan renk modlarının ne gibi değişiklikler yaptığına bir bakalım. iki resim üstüste geldiğinde renk modu önem kazanmaktadır. siz çalışmalarınızda Normal Mode bırakabilirsiniz fakat ilerleyen kısımlarda bu konulara hakim olmanız gerekmektedir. Bu resimde Kedi Resminin Mode özellikleri değiştirilerek sonuçlar sıralanmıştır.

34 Mode Özellikleri

35 Mode Özellikleri

36 Mode Özellikleri

37 Mode Özellikleri

38 Mode Özellikleri

39 Mode Özellikleri

40 Mode Özellikleri

41 Mode Özellikleri

42 Mode Özellikleri

43 Mode Özellikleri

44 Mode Özellikleri

45 Mode Özellikleri

46 Mode Özellikleri

47 Mode Özellikleri

48 Mode Özellikleri

49 Mode Özellikleri

50 Mode Özellikleri

51 Mode Özellikleri

52 Mode Özellikleri

53 Mode Özellikleri

54 Mode Özellikleri

55 Photoshop ve Imageready Kullanarak Html Sayfası Arayüzü Oluşturmak Resimler üzerinde editleme Işlemlerini yaptıktan sonra yada istediğiniz noktada program arasında geçiş yaparak tasarımı geliştirebiliriz. Sayfa tasarım kriterlerini belirledikten sonra anasayfadan başlayarak Içerikte neler olacağını arayüzde yerine oturtmamız gerekiyor aksi taktirde herseferende yeniden tasarıma eklenen öğeler Için başa dönmemiz gerekekir. Bunun Için en başta eskiz yaparak sayfa üzerinde olacakları tasarlamız daha doğru olacaktır.

56 Photoshop ve Imageready Kullanarak Html Sayfası Arayüzü Oluşturmak Arayüz için resimlerinizi istenilen boyutlara ayarladınız ise imageready programına geçiş yapabiliriz. Bunun Için tools panelindeki en alt butona tıklamamız yeterli olacaktır. Daha sonra imageready üzerinden html Işlemlerimizi daha etkin bir biçimde oluşturabileceğiz.

57 Imageready Genel Bakış A E D B C A: Tools Paleti B: Çalışma Alanı C: Katmanlar Paneli D: Slice Paneli E: Web Content Paneli

58 ImageReady kullanarak slice Oluşturmak ImageReady kullanarak arayüzü bölümlere ayırmak daha etkin oluşturulabilir. Tasarım alanınızı katmanlar kullanarak tanımladığınızda katmanın üzerinde sağ tıklayarak açılan menüden New Layer Based Slice seçerek slice oluşturulabilir. Bu şekilde akranı bölümlendirdiğinizde katmanda bir değişiklik yada ekleme olduğunda Slice ın da kendisini güncellemesidir.

59 ImageReady kullanarak Buton Oluşturmak Ekranda tasarladığınız herhangi bir Slice Için Buton özelliği verilebilirsiniz buna yazılar yada ikonlar da dahildir. Bu uygulamada rectangle tool kullanılarak oluşturulacak bir butonun ve onun nasıl çalıştığını anlatacağız.

60 ImageReady kullanarak Buton Oluşturmak Ister Rectangle tool yada Tab rectangle tool kullanılarak ekranda buton alanı belirlenebilir. Eğer tasarımda Imageready nin style larını kullanmak istiyorsanız options panelinden Style ikonuna tıklayarak açılan menüden seçim yapabilirsiniz. Burada dikkat edilmesi gereken Rollover butonlar seçilir ise bu butonlardan otomatik oluşacak olan Rollover states lere dikkat etmek gerekir şöyle ki

61 ImageReady kullanarak Buton Oluşturmak Seçilen Style Içerisinde hangi rollover states olduğuna dikkat edin. Eğer seçtiğiniz Style de böyle bir özellik yok ise bunun farkında olun. Kendi rollover butonumuzu yaratmak Için karışıklık olmaması Için herhangi bir Style ı seçmiyorum. Siz isterseniz sayfalarınızda style kullanarak bu Işlemi gerçekleştirebilirsiniz.

62 ImageReady kullanarak Buton Oluşturmak Ekranda Rectangle tool seçerek bir buton Için alan belirliyorum. Daha sonra bundan bir slice yaratmak Için katmanlar panelinden üzerine giderek sağ tıklayarak açılan panelden New Layer Based Slice seçiyorum.

63 ImageReady kullanarak Buton Oluşturmak Daha sonra Web Content Panelinden oluşan yeni slice Için bir rollover state ekliyorum bunun Için Create rolloverstate butonuna tıklıyoruz. Daha sonra oluşan yeni Over rollover state Için ekranda katmanları açıp kapatarak web sayfasında farenin imleci o butona geldiğinde ekranda hangi görüntünün olacağını belirtebiliyoruz. Bunun için

64 ImageReady kullanarak Buton Oluşturmak Ekranda aynı konumda 2 buton yaratmam gerekli bunun Için daha önce yaratmış olduğum katmanın üzerine sağ tıklayarak Duplicate Layer seçiyorum. daha sonra bu katmanın renk özellikleri gibi istediğim bileşenlerini bir öncekinden farklı olacak şekilde değiştiriyorum.

65 ImageReady kullanarak Buton Oluşturmak Daha sonra Web Content panelinde Slice ın normal hali üzerine tıklıyorum. Bunun anlamı normalde HTML dosyasında hangi resmin ekranda olacağı.. Ve hangi katmanı görmek istiyorsam onu açarak diğerini kapatıyorum Aynı Işlemi Over kısmına tıkladıktan sonra HTML dosyasında imleç üzerine geldiğinde hangi katmanları görmek istiyorsam onları aktif hale getiriyorum. Dikkatli gözler Over state seçildiğinde katmalardaki açık kapalılık özelliklerinin değiştiğini fark edecektir.

66 ImageReady kullanarak Buton Oluşturmak Web Content Içerisinde seçili olan normal ve Over state lere dikkat edecek olursak katmalardan hangilerinin açık kapalı olması gerektiği daha net biçimde anlaşılacaktır.

67 ImageReady kullanarak Buton Oluşturmak Eğer butonun üzerine gelindiğinde başka bir alandaki resimlerin de değişmesi isteniyor ise Over state yanındaki ikona tıklanarak sürükle bırak yapılarak ekrandaki ilgili Slice alanına sürüklenir. O slice alanı Için de aynı Butonda olduğu gibi 2 katmanımızın olması ve bu rollover state ler Için açıp kapatmak gereklidir.