Photoshopla uğraşıpta bir Style, Gradient, Shape veya Brush seti kullanmayan yoktur sanırım. Photoshop‘un en büyük temellerini oluşturan bu uygulamalarda bazen kendi oluşturduğunuz setleri kullanmak isteyebilirsiniz. Aslına bakarsanız bunu yapmak çok basit.

Sözgelimi kendinize göre kullandığınız bir Layer Style tasarımı yaptınız ve bunu kullandığınız katmana (layer) uyguladınız. Bu aşamadan sonra aynı katman seçili durumdayken Window >> Style penceresini açın. Burada aşağıda yer alan küçük butona tıklayarak (Create New Style) karşınıza gelen pencerede stilinize isim vererek saklayın. Bu gibi birden fazla stil yaparak kaydedebilirsiniz.

Gelelim bu kaydedilen stillerin bir set haline getirilmesine. Edit >> Preset Manager bölümüne tıklayın. Karşınıza çıkacak olan küçük pencerede preset type olarak Styles seçin. Muhtemelen az önce kaydetmiş olduğunuz stillerinizi de göreceksiniz. Kendi yapmış olduğunuz stilleri Ctrl tuşu ile tek tek seçerek yine aynı pencerede yer alan Save Set butonuna tıklayın. Burada açılan diyalog penceresi sizden stil setinize bir isim vermenizi isteyecektir. İsim verdikten sonra kaydederek kendi oluşturmuş olduğunuz stil setini kullanabilirsiniz.

Sadece stiller değil aynı işlemi, Brush, Shape, Gradient gibi alanlarda da uygulayabilirsiniz. Preset Manager bütünüyle sizin elinizde. Kendi kullanmış olduğunuz Style, Gradient, Shape gibi ögeleri set haline getirerek hem rahat kullanım avantajına sahip olursunuz hem de isterseniz bu oluşturduğunuz ögeleri webde dilediğiniz gibi paylaşabilirsiniz. (Biraz uzun bir ipucu oldu kusura bakmayın)

Psdtuts.com acemi ama bir o kadar da öğrenme heveslisi insanlar için en güzel 50 Photoshop anlatımını bir araya getirmiş.

Tasarım yaparken hangi programları kullanıyorsun diye sorular alıyorum bazen. Fazladan bir program veya hizmet kullanmadığımı, klasik tasarım programları kullandığımı söylüyorum. Herkese tek tek bunları anlatmaktansa günce üzerinde yazmayı daha uygun buldum. Hatta iyi bir mim konusu olabileceğini düşünerek yazımın sonunda bazı arkadaşlarıma pasta atacağım. Belki böylesi daha iyi olur. İnşallah pas attığımız arkadaşlar güzel yorumlarıyla geri dönerler.

Şimdi, gelelim listemize. Herşeyden önce tasarımda kullandığım vazgeçilmez program Photoshop. Grafik tasarım işlerimi hatta işlerimin çoğuna başlangıcımı Photoshop ile yapıyorum. Yakın bir zamana kadar Photoshop’un 7.0 versiyonunu kullanıyordum. Şu sıralar Photoshop CS yani 8.0 kullanıyorum.

Tasarım editörü olarak Dreamweaver 8 kullanıyorum. Her ne kadar Dw sadece bazı noktalarda bana yardımcı olsa da hızlı yetiştirmem gereken işlerde hep kazanç sağlıyor. Bununla birlikte basit veritabanı ve Php işlemlerimi de sağolsun Dreamweaver hallediyor. Şayet ileri düzey bir veritabanına ihtiyacım varsa mutlaka veritabanı şemasını çıkarabilmek için EMS Mysql Manager kullanıyorum.

Animasyon ve basit navigasyon işlerimde Flash 8 kullanıyorum. İtiraf edeyim Flash bilgim o kadar iyi değil. Sadece kendime yetecek kadar biliyorum. (En azından bir top çizip havaya atıp yere indirebiliyorum :) Olsun ileride mutlaka kendimi bu alanda biraz daha fazla geliştireceğim.

Metin editör olarakta her zaman söylediğim gibi Notepad++ kullanıyorum. Bu harika editör 3 yıldır hayatımda ve bir daha kopamadım. Her format sonrası mutlaka ilk kurduğum programlardan birisi oluyor. Özellikle Css ve Xhtml kodlama yapan birisi olarak benim için büyük kolaylık sağlıyor. Unutmadan bir de Free Css Toolbox programı var. Css kod yazanlar için bire bir. Ancak ben kopyacılık olmasın hem de hazıra konmayayım diye bu programı pek tercih etmiyorum. Şayet işin acil teslim edilmesi gerekiyorsa belki kullanırım.

Tüm bunlarla birlikte Php/Mysql sunucu olarak Wampserver‘ı, FTP işlemlerim için FileZilla‘yı, Tarayıcı olarak (tabi ki) Firefox‘u kullanıyorum. Firefox’ta tasarımlarıma yardımcı olan en büyük yardımcımsa Aardvark eklentisi.

Tabi kod yazarken veya Photoshop’ta çalışırken mutlaka Winamp açıktır ve bir Trance parça eşliğinde önce tasarıma sonra uçmaya geçilir :) Bu da işin güzel tarafı ne diyeyim.

Evet tasarım yaparken başlıca kullandığım programlar bunlar. Şimdi gel gelelim paslarımıza;

Yakuter, Dmry, SiberKültür ve Oceangray… Hadi bakalım top sizde :)

(SON SÖZ: Kimi zaman gerçek bir tasarım ortaya koyabilmek için bir iki program yeterlidir. Ancak ilhamınız yoksa isterse onlarca yardımcı programınız olsun bunların hiçbiri bir işe yaramaz!

Güzel günlerde görüşmek dileğiyle…)

Photoshop’u ister web tasarımı amaçlı isterseniz de fotoğraf manipülasyonu için kullanın yine de bir şekilde yolunuz Pen Tool (P) ile kesişmiştir. Pen aracı aslında Photoshop‘un olmazsa olmazlarından olan ve birçok grafik tasarımcının vazgeçemeyeceği bir araçtır.

Pen tool sayesinde belli bir alanı kesip çıkarma, Shape (şekil) elde etme gibi işlemler yapabiliriz. Bunlarla birlikte Pen Tool ile oluşturduğumuz şekillere belli efektler verebiliriz. Biz bu makalemizde Photoshop’un Pen aracını kullanarak eğik şekillere hakim olmayı öğrenecek ve bunu Glow (Ateşlendirme, Kızartma diye Türkçemize çevirebiliriz) şeklinde nasıl detaylandırabileceğimizi öğreneceğiz. Bu sayede Pen Tool’u nasıl kullanabileceğimizi de sizlerle paylaşacağız. Basit bir iki adımdan oluşan bu uygulama için hemen Photoshop’umuzu açalım :)
Gönderinin Devamını Okuyun…

Dzineblog.com’dan harika bir derleme. 45 tane Photoshop Brush (Fırça) kaynak sitesi bizleri bekliyor. :)

Rss beslemeler ve Rss beslemelere ait ikonlarımız neredeyse blog sitelerimizin vazgeçilmezlerindendir. İnternette hazır olarak bulunan birçok çeşit ve görünümde Rss ikonu bulunmaktadır. Ama kendi Rss ikonunuzu kendiniz yapmaya ne dersiniz?

Bu makalemizde Photoshop kullanarak çok basit bir iki adımda kendi Rss ikonumuzu yapacağız. Bunun ihtiyacımız olan tek şey Photoshop. Hadi başlayalım!

(NOT: Sitemizde elimizden geldiğince Photoshop makaleleri yayınlıyoruz ama bir Photoshop kategorimiz bile yokmuş, ben de bir tane oluşturuverdim. Photoshop isimli kategorimizin ilk yazısı bu oluyor böylelikle :)
Gönderinin Devamını Okuyun…

Merhabalar, başlığın oldukça itici olduğunun farkındayım. Ancak yazmak istediğim makale ve uygulamaya başka bir isim bulamadım inanın. (Web’de yaptığım araştırmada bu tarz uygulamalara Glossy Text deniyor ancak tam olarak sizlere Glossy Text’i anlatmayacağım, ismini bilen bir dostumuz yazarsa çok sevinirim :)

Yazımızın giriş kısmında örneğini gördüğünüz üzere bu tür metin efektleri Web 2.0′ın bir tasarım özelliği olan “gradient” kullanımıyla mümkün. Kullanacağımız metinlere Photoshop’ta vereceğiniz “Gradient Overlay” efekti ile bu tarz yazı stillerine sahip olabiliriz. Kaldı ki yeni nesil web sitelerinde bu tarz yazıları sıkça görmekteyiz. O halde sözü fazla uzatmadan uygulamamıza geçelim.
Gönderinin Devamını Okuyun…

Herkese selamlar, Photoshop Uygulamalarına elimizden geldiğince sitemizde yer vermeye çalışıyoruz. Bu makalemizde de bunlardan birine yer vereceğiz. Basit Photoshop uygulamalarıyla sitelerimiz için rahatlıkla birkaç adımda oluşturulabilecek butonlar ve navigasyonlar yapabiliriz. Aslına bakılırsa yukarıdaki navigasyonu 1-2 dakika içinde oluşturmak hiçte zor değil. Şimdi dilerseniz hemen nasıl adımlar izleyeceğimizi ve navigasyonumuzu nasıl şekillendireceğimizi anlatalım.
Gönderinin Devamını Okuyun…

Photoshop ile uğraşan kişilerin öyle ya da böyle kendi zevklerine göre oluşturdukları bir Fırça (Brush) arşivi vardır. Fırçalar yapmış olduğumuz tasarımlarda çokça kullandığımız ve iyi kullanıldığında büyük oranda tasarımı geliştiren elemanlardır.

Çoğu zaman kendi fırça arşivime güvensem de yine de arada sırada internette görmüş olduğum ücretsiz fırçaları bilgisayarıma indirip deniyorum. Gerçekten çok hoş çalışmalar ve kaliteli fırçalar bulmak mümkün. Bu yazımda beğenilen fırça kaynaklarına kısaca değineceğim ve sizlere ilgili bağlantıları sunacağım. Umarım sizler için faydalı olur.
Gönderinin Devamını Okuyun…

Efendim yeniden merhabalar. Aşağıda birazdan okuyacağınız makaleyi ben yazmadım. Perfectgate.net sitesinden C-Nem yazmış. Sitede okuyunca hoşuma gitti. Yayınlamak için izin istedim ve sağolsun iznini aldım.

Bu yazımızda bir resme yağmur efekti uygulayacağız. Kaynak bir resmin üzerinde yapacağımız bir iki basit Photoshop efekti ile yağmur yağıyormuş izlenimi uyandıracağız. Dilerseniz hemen makalenin devamına geçelim.
Gönderinin Devamını Okuyun…

Web tasarımı yaparken en büyük yardımcımız olan Photoshop’ta çokça fırça ve dolgu (brush, pattern) kullanırız. Bu dolgu ve fırçalar özellikle yaratıcı web sitelerinde oldukça karşımıza çıkarlar. Kaldı ki artık Web 2.0 tasarım konseptinin iyice yaygınlaştığı günümüz anlayışında birçok sitede bu tarz dolgu ve fırça işlemlerini görebiliriz. Bu yazımızda sizlere kısaca kendi dolgu ve fırçalarınızı nasıl yapacağımızı anlatacağız ve küçük uygulamalar ile örnekler çıkaracağız.

Bahsettiğimiz işlemleri yapmak için Photoshop versiyonunuz çok önemli değil, 6, 7, CS veya CS2 versiyon olabilir. Ben uygulamalarımı 7 ve CS sürümlerinde yapıyorum. Bu kısa ön bilgilendirmeden sonra hemen uygulamalarımıza geçelim.

KENDİ FIRÇALARIMIZI OLUŞTURALIM
Yazımızın giriş bölümünde belirttiğimiz gibi Fırçalar (Brushes) Photoshop uygulamalarında ve özellikte web tasarımında çokça kullandığımız araçlardır. Bizlerde kendi yapmış olduğumuz şekilleri ve simgeleri fırça haline getirerek sonraki uygulamalarımızda kullanabiliriz. Öncelikle kendi istediğiniz boyutta bir Photoshop dokümanı açın ve sevdiğiniz bir şekli yeni bir layer (katman) üzerinde çizin. Ben aşağıda örnek olması bakımından şu şekli çizdim.

Şimdi çizmiş olduğumuz bu şekli en küçük boyuta getirin. Çiziminizi bir kareye sığabilecek şekilde kesin. Bu iş için Crop aracını kullanabilirsiniz. Çiziminizi kestikten sonra yukarı menüden Edit >> Define Brush bölümünü seçiyoruz. Burada karşımıza gelen küçük pencerede fırça numaramız yazıyor ve bu alanda fırçamıza kendi ismini verebiliyoruz. Bu şekilde kayıt yaptıktan sonra boş bir doküman üzerinde yeni katman oluşturup B tuşuna basarak fırçalara girip kendi oluşturduğumuz fırçayı seçebiliriz. Gördüğünüz üzere kendi fırçalarımızı yapmak gayet kolay. Tek yapmamız gereken şey kendimize özgü ve nerede kullanılacağını bileceğimiz fırçalar yaparak işlerimizi daha da kolaylaştırmak.

ŞİMDİ DE KENDİ DOLGUMUZU OLUŞTURALIM
Photoshop’ta sıkça dolgu aracını kullanıyoruz. Kullandığımız dolguların karakterleri Web 2.0 ile büyük bir değişiklik geçirdi. Eskiden dolgulara verilen önem daha azken şimdi kullanılan değişik dolgu birimleriyle bu konuda da büyük bir adım atıldığını görüyoruz. Web 2.0 konseptli tasarımlara bakarsanız farklı dolgu modellerinin farklı alanlarda kullanıldığını görebilirsiniz. Yazımızın bu bölümünde ise kısaca kendi dolgularımızı nasıl yapacağımızı göreceğiz. Bu iş için bir dolgu modeli belirleyelim ve onu uygulamaya geçelim.

Photoshop’ta birçok dolgu yöntemi vardır. Aslına bakılırsa böyle bir ayrıma gitmek tasarım ufku açısından yanlıştır ancak konuyu daha iyi anlatabilmek ve daha iyi kavrayabilmek için böyle bir ayrıma gitmede bir sakınca görmüyorum.

Dolgu yaparken ilk örneğimizde küçük bir doküman açarak “renk bazlı” bir dolgu yöntemi uygulayacağız. Photoshop’ta 12*12px boyutlarında beyaz arkaplana sahip bir doküman açın. Bu dokümanı en yüksek oranda büyütün. (%1600) Şimdi bu alanda Shift+B tuşuna basarak Pencil Brush aracını seçin. Bu araca 2px değer verin ve renk alanında A8A8A8 rengini ayarlayın. 12 piksellik dokümanımızın ilk 2 pixelini bu dolgu ile doldurun. Daha sonra renk alanında C0C0C0 renk dolgusunu seçin ve kaldığınız noktadan başlayarak yeniden alanı doldurun. Bu şekilde sıralı bir biçimde doküman sonuna kadar ilerleyin. İşleminiz bittikten sonra yine fırçalarda olduğu gibi Edit menüsünden Edit >> Define Pattern alanına gelin. Burada dolgunuza isim vererek dolguyu kullanabilirsiniz. İsterseniz dolgunuzun vermiş olduğu efekti vermek için 400*400px bir boş doküman açın ister yeni bir katman oluşturarak ister oluşturmadan G tuşuna basın. Dolgu aracından Pattern dolguları seçerek kendi yapmış olduğunuz dolguyla çalışmanızı doldurun. Dolgunuzun nasıl göründüğü ortada. Bu işlem gayet kolay ve yapması da fazla çaba gerektirmeyen bir uygulamadır.

Şimdi bir başka dolgu modeline geçelim. Bu dolgu modelinde daha çok resimlerle uğraşacağız. Resim kullanırak yapılan dolgularda dikkat edilmesi gereken nokta ise; dolgunun uygulandığı yüzeyde sürekli tekrarlayacağı için kullanılan ögelerin doğru yerleşimine özen göstermemiz gerektiği. Ancak bu durum her zaman geçerli değil, çünkü sadece tekrarlı çalışmalar yapmayacağız. Dilerseniz kısaca bu yöntemden de bahsedelim.

Şimdi Photoshop’ta 100*100px ve beyaz arkaplana sahip bir doküman açalım. Bu doküman üzerinde bir dolgu oluşturmak için ben Shape alanından bir şekli tercih ettim. Siz de kendi belirlediğiniz küçük bir şekil veya resmi doküman üzerinde kullanabilirsiniz. Resim ögemizi seçtikten sonra bu ögeyi sayfa üzerine belli aralıklarla diziyoruz. Burada sizi yönlendirmek istemiyorum çünkü bu sizin dolgunuz olacak. Ben aşağıda gördüğünüz şekilde dolgumu yaptım ve bunu Edit >> Define Pattern alanından MyPattern adını vererek kaydettim. Dolgumu yaparken dolgunun kendini tekrarlayacağını düşünerek yerleşimi dokümanın ortasına göre yaptım ve daha sonra bunu dolgu olarak başka bir alanda deneyerek sonucu gördüm.

Sadece bu yöntemle sizlerde kendinize farklı dolgu örnekleri hazırlayabilirsiniz. Yukarıda az çok belirtmeye çalıştığım gibi resim bazlı ve farklı dolgu modelleri sayfamızın görünümüne daha fazla renk katacaktır. Özellikle kararlı ve tasarımın gidişini olumlu yönde etkileyecek dolgular Web 2.0 konseptine çok uygun tasarım klişeleri arasında sayılmaktadır.

Umarım bu kısa makale sizlere kendi dolgu ve fırçalarızı hazırlamak için yararlı olur.

Digg‘de gezintilerimden birini yaparken bir gönderiye rastladım. Photoshopla klasör yapımını anlatan hoş bir makale ilgimi çekti. Aşağıda okuyacağınız yöntemle, kolay ve yapması fazla uzun sürmeyen bir biçimde kendi klasörlerimizi oluşturabiliriz. Lafı fazla uzatmadan hemen uygulamamıza geçelim. (Bu uygulama için Photoshop versiyonunuz önemli değil, ben 7 versiyonda bu uygulamayı yapabiliyorum)

ADIM 1
Öncelikle 400*400 px boyutunda RGB özellikli ve 72 resulation’a sahip bir doküman açın. Daha sonra aşağıdaki şekle benzer bir şekli Tool bölümünden Polygonal Lasso Tool (L) ile çizin. Shift tuşuna basılı tutarak düz çizgiler elde edebilirsiniz. Dilerseniz Photoshop’ta View >> Show >> Grid diyerek çalışma alanınızı karelere bölebilir bu sayede çiziminizi daha kolay yapabilirsiniz.

ADIM 2
Çizdiğimiz katmana (layer) şu özellikleri uygulayalım. (Adım 1′de çizmiş olduğunuz layer üzerine iki kere tıklayarak katman özelliklerini açın ve aşağıda yer alan özellikleri vererek çalışmanızın son halini elde edin.)

Gradient Overlay bölümünde renk geçişleri #FFd27A -> #FFB912 arasında olacak.

Stroke alanında ise Size: 1px - Position: Outside - Renk: #C07C33

Inner Glow bölümünde Blend Mode: Normal - Renk: #FFFFFF - Choke: 100% ve Size: 1px şeklinde ayarlayın. Bu aşamadan sonra aşağıdakine benzer bir görünüm elde etmiş olmalısınız. (Bu katmanı, katman 1 olarak adlandırın)

ADIM 3
Bu adımda ise mevcut katmanımızı Ctrl+J tuş fonksiyonuyla kopyalıyoruz. Kopyalanan katman üzerinde Ctrl+T tuş kombinasyonunu kullanarak eğip bükme işlemlerini yapacağız. Lütfen aşağıdaki şekle benzer biçimde değişiklikleri yeni layerınıza uygulayın. Yeni katmanın önce üst köşelerinden yana doğru bir miktar çekiyoruz. Daha sonra üst orta bölümden bir miktarda boyunu kısaltıyoruz. Şekilde yaptığımız işlemleri görebilirsiniz. (Bu katmanı, katman 2 olarak adlandırın)

ADIM 4
Bu adımda ise klasörümüzün içinde bir belge varmış izlenimi vermek için yeni bir katman oluşturacağız. Bu katmanda klasörlerimizden daha küçük bir dörtgen çizerek işe başlıyoruz. Bu dörtgeni dilerseniz Marquee Tool (M) ile dilerseniz de Rectangle Tool (U) ile çizebilirsiniz. Katman renginin beyaz olmasına (#ffffff) dikkat ediniz. (Bu katmanımızın adı da katman 3 olsun)

Çizimimizi yaptıktan sonra katmanımıza aşağıdaki özellikleri uyguluyoruz.

Gradient Overlay bölümünde Opacity: 10% renk geçişleri #000000 -> #FFFFFF - Angle: 50°

Stroke alanında ise Size: 1px - Position: Outside - Renk: #D6D6D6

Bu özellikleri verdikten sonra aşağıdakine benzer bir şekil elde etmiş olacaksınız.

ADIM 5
Klasörümüzü ve içinde görünecek olan belgeyi oluşturduktan sonra artık son rötuşlara geliyoruz. Bu bölümde son çizmiş olduğumuz beyaz dörtgen katmanı seçiliyken Ctrl+T tuş kombinasyounnu kullanıyoruz ve dörtgenimizi (shift tuşuna aynı anda basarak) biraz yukarı kaldırıyoruz. Böylelikle belge görünümü sanki klasörün içine girmiş gibi olacak. Daha sonra Katman 2′yi seçiyoruz ve burada katman özelliklerinden Opacity (görünüm) değerini %70′e getiriyoruz. Böylelikle bu katmanımız biraz daha şeffaf bir hale gelmiş olacak ve içindeki belgemiz daha görünür hale gelecek.

Katman 3′ün katman 2′nin altında olduğuna dikkat ediniz. Aksi durumda katmanlarımız arasında görünüş farkı olacaktır. Layer penceresinde hangi katmanın hangisinin altında veya üstünde kalmasını istiyorsanız fare yardımıyla o katmanı bir sonrakinin üzerine sürükleyebilirsiniz. (Bu da başka bir Photoshop ipucu oldu)

Çalışmamız burda noktalanıyor, dilerseniz farklı renklerde klasörler oluşturabilir, Katman 3′ü kendinize göre tasarlayabilirsiniz. Şayet bu şekilde bırakacaksanız Katman 3′ün üst köşesine aşağıdaki gibi bir katlanma efekti verebilirsiniz. Sadece Katman 3′ün sağ üst köşesini kesip koyu bir renge boyayıp yapıştırmanız yeterli olacaktır.

Malumunuz, Photoshop ile birçok şeyi yapabiliyoruz. Bu “birçok şey” içinde Photoshop’un kullanımının yaygın olduğu en büyük alanlardan birisi de web tasarımı. Web ikonlar, web şablonları, web bannerları gibi birçok uygulamayı rahatlıkla photoshop üzerinde yapabiliyoruz. Hemen hemen tüm tasarım projelerimin başlangıcında öncelikle Photoshop ile çalışıyorum. Bunu yapmamın nedeni sitenin genel arayüzünü Photoshop ile tasarlayarak webe aktarmak. Bu yazımda sizlere Photoshopta yaptığımız bir çalışmanın nasıl web şablonu olarak kaydedileceğinden ve bununla ilgili tekniklerden bahsedeceğim.

Öncelikle Photoshop üzerinde uygulamamızı yapacağımız bir çalışmamızın olması gerekiyor. Ben aşağıda gördüğünüz çalışmayı yaptım ve bunu örnek olarak kullandım. Sizde buna benzer bir çalışmayı basit işlemlerle oluşturabilirsiniz. Çalışmanın uzun uzadıya nasıl yapıldığını anlatmayacağım. Bunu biraz da sizlere bırakıyorum. Çünkü asıl anlatmak istediğim nokta Photoshop ile oluşturulan böyle bir sayfanın nasıl “kesileceği” ve “webe aktarılacağı”. (Zaten ileride Photoshop ile bir web arayüzü tasarlamakla ilgili bir makale yazmayı düşünüyorum)

Çalışmamızı Photoshop üzerinde açıyoruz ve bundan sonra yavaş yavaş kesme işlemine başlayacağız. Bu kesme işleminden kastımız oluşturduğumuz PSD dosyasını Photoshop’un Slice aracını kullanarak belli parçalara ayırmak bu parçalara isim vermek ve bu işlemi yaptıktan sonra “web için kaydetmek”. Benim yapmış olduğum çalışmada izlediğim mantık yazı alanları için büyük parçalar kesmek ve her link içinse ayrı ayrı kesim alanları oluşturmak.

Şimdi bunu nasıl yaptığımıza sıra geldi. Çalışmamızı açtıktan sonra Photoshop’ta Araçlar menüsünden Slice Tool’u seçiyoruz. (K) Bıçak şeklindeki ikonumuzla çalışmamızı kesmek istediğimiz yerlerden kesmeye başlıyoruz. Bunu yaparken mümkün olduğunca mantıklı bölümleme yapıyoruz. Çünkü daha sonra bu çalışma webe aktarıldığında bu alanlar üzerinde değişiklikler yapacağız. Aşağıda yaptığım kesme alanlarına ufak notlar ekledim bu alandan yararlanarak nasıl bir kesim yaptığımı görebilirsiniz.

Gördüğünüz gibi ileride kullanacağım alanlarda kesim işlemlerimi uyguladım ve kesim alanlarımı tamamladım. Kestiğim noktaların herbirine Photoshop otomatik olarak numaralar veriyorlar. Shift+K tuş kombinasyonunu kullanarak kestiğim alanların üzerine 2 kere tıklayarak kestiğim alanlara kendi istediğim isimleri verebilirim. Şimdi çalışmam bu haldeyken File >> Save for Web veya Alt+Shift+Ctrl+S tuş kombinasyonunu kullanarak çalışmayı web için kaydediyoruz.

Açılan pencerede uyguladığımız kesme işlemini detaylı olarak görebiliyoruz. Bu haldeyken Save diyerek açılan pencerede istersek yeni bir klasör açıyoruz istersekte bilgisayarımızda belli bir alana çalışmamızı isim vererek kaydediyoruz. Ben yaptığım çalışmada index.html ismini vererek bir klasör içine çalışmamı kaydettim. Bu kayıt işlemi bittikten sonra isim verdiğiniz dosya .html uzantılı bir dosya olacak ve aynı dizinde bir images klasörüne rastlaycaksınız. Bu dosyayı tarayıcınızda açtığınızda oluşturmuş olduğunuz PSD dosyasının web biçiminde kaydedildiğini göreceksiniz. Webe aktarma işlemi bittikten sonra dosyamız üzerinde değişkilikler yaparak sayfamızı değiştirebiliriz.

DEĞİŞİK TEKNİKLER
Yukarıda anlattığım kesme işlemi yerine yine Photoshop’un kesme işlemini kullanarak web sayfalarımızı farklı şekilde Photoshop yardımıyla oluşturabiliriz. Örneğin yaptığımız PSD dosyasını yine aynı biçimde Slice aracıyla kesebilir ve kestiğimiz alanları tek tek resim olarak kaydedip bu resimleri daha sonra Dreamweaver gibi görsel editörlerde kullanabiliriz.

Bununla birlikte sürekli yaptığım bir teknikte yaptığım çalışmayı yine aynı biçimde keserek Photoshop açıkken Xhtml ve Css kodlarıyla sayfa kodlamamı yapıp resimleri kullanmamdır. Photoshop’taki çalışmama bağlı kalarak kodlamayı bu şekilde yaparım ve referans aldığım sayfaya en yakın tasarımı yapmaya uğraşırım.

Bunun gibi değişik teknikler kullanılarak Photoshop’ta web uygulamalarımızı rahatlıkla yapabiliriz. Umarım faydalı olabilmişimdir.

Sitemin Header alanında ve yeni yazıların üzerinde stickerlar görüyorsunuz. Bu stickerları (etiket olarak Türkçe’ye çevriliyor) artık birçok web sitesinde görmeye alıştık. Web 2.0′ın bize sunduğu tasarım yeniliklerinden birisi de bunlar. Yeni haberlerimizi, yeni dosyalarımızı veya çarpıcı olduğunu düşündüğümüz birçok şeyi bu stickerlar sayesinde web sitemizden duyuruyoruz. Ben bu yazımda size sürekli kullandığım yöntem ile bu tarz etiketlerin nasıl yapıldığını anlatacağım. Başka yöntemlerde var ancak, Oval Köşeler yazımda belirttiğim kadar kolay ve zahmetsizce bu işi yapacağız. (Hemen belirtmekte fayda var Photoshop versiyonunuz ne olursa olsun bunu yapabilirsiniz, ben şahsen 7.0 kullanıyorum ve yükseltmeyi de aklımın ucundan geçirmiyorum)
Gönderinin Devamını Okuyun…

Web 2.0′ın en büyük getirilerinden birisi de “Oval Köşeler” (Rounded Corners) oldu. Hemen hemen her site bu oval köşeli dörtgen şekilleri kullanmaya başladı. Birçok yerde Photoshop ile oval köşeli dörtgenlerin nasıl yapılacağına dair makaleler bulmak mümkün. Ancak ben bu yazımda Photoshop’a başladığım günden bu yana kullandığım stili sizinle paylaşacağım. Yazının devamında ekran görüntüleriyle birlikte bu işlemi göstereceğim. Gerçekten çok kolay ve zahmetsiz.
Gönderinin Devamını Okuyun…