Photoshop ve CSS ile Web Tasarımı

Photoshop Dersleri - Photoshop ve CSS ile Web Tasarımı Sponsorlu Bağlantılar Arkadaşlar yine güzel bir ders ile karşınızdayım.Bu derste Photoshop ile tasarımımızı yaptıktan sonra sayfamızı nasıl webe yollayacağımızı ve bu yolda bize gereken CSS kullanımını göstereceğim.Deneme olarak kullanacağımız basit ...

Cevapla
Photoshop ve CSS ile Web Tasarımı
Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart

Photoshop ve CSS ile Web Tasarımı

Alt 25-06-2009 #1
Sponsorlu Bağlantılar

Arkadaşlar yine güzel bir ders ile karşınızdayım.Bu derste Photoshop ile tasarımımızı yaptıktan sonra sayfamızı nasıl webe yollayacağımızı ve bu yolda bize gereken CSS kullanımını göstereceğim.Deneme olarak kullanacağımız basit bir tasarım hazırladım.Psd dosyasını Ekten indirebilirsiniz.

Photoshop ve CSS ile Web Tasarımı

Adım 1:
Tasarımı bitirdikten sonra Slice aracı ile web ortamında dinamik olarak kullanacağımız alanları belirliyoruz.Bize yardımcı olması açısından silicelayacağımız alanları kılavuz çizgiler(Guides) ile belirlersek fazla karşıklık olmadan işin içinden çıkabiliriz.Ben bir çerçeve hazırladım HTML dosyamda bu alan içine dinamik olarak yazı yazacağım.Onun için belirlediğim alan çerçevenin içinde oldu çerçeve çizgilerini bu alana dahil etmedim.

Photoshop ve CSS ile Web Tasarımı
Photoshop ve CSS ile Web Tasarımı

Adım 2:
Tasarımı yaptık ve yazı yazacağımız alanı sliceladıktan sonra kayıt işlemine geçeceğiz.Photoshop burada bize çok yardımcı oluyor.Tasarımı bir html şablonu olarak kaydedip istersek hazır olarak css kodlarını ekletebiliyoruz.Bunun için "File >> Save For Web & Devices" i seçin.Kayt türü PNG-24 seçin.Ve ayara penceresi yanındaki küçük ok simgesine tıklayıp "Edit Output Settings" i seçin.Ayarları uygulayın.

Photoshop ve CSS ile Web Tasarımı

HTML kategorisinde "XHTML" i seçin.Bu html dosyamızın düznemli bir html yapısında olduğunu gereksiz tablolamalardan ,rowspan,collspan vs kullanılmamasını sağlar.Günümüz web teknolojisi artık XHTML siteler üzerine kuruludur.

Photoshop ve CSS ile Web Tasarımı

Slice kategorsinde ise çıktıların bir CSS kodu olarak alınmasını sağlayacak.Bu noktada CSS bilmeyen arkadaşlara büyük faydası olacaktır.Preferences i "By ID" yapın buda html şablonunda kullanılan DIV taglarının isimlendirlmesi işlemini "id" kullanılarak yapılmasını sağlayacaktır.

Photoshop ve CSS ile Web Tasarımı

Ok diyerek değişikliği onaylayın.Bu ayarlar her çalışa için varsayılan olacaktır.Bu şekilde her çıkış aldığınızda işinize yaramayacaksa slice alanından "Tables" ı seçin.Asıl kayıt pencerisinde "Save" diyoruz ve kayıt türü olarak HTML & IMages seçiyoruz.İsim alanına kısa şeyler yazın.Çünkü bu isim hem html dosyasının ismi hemde resimlerin ismi olacaktır.

Photoshop ve CSS ile Web Tasarımı

Adım 3:
Artık Photoshop bize istediğimiz herşeyi verdiğine göre bir Web editörüne geçerek bazı küçük detaylar hazırlayacağız.Ben Dreamweaver programını kullanacağım.Görsel tasarlamada bir numara programdır.Photoshopun hazırladığı index.html ve images klasörünü bir klasör içine atın ve o klasörü Dw da bir site klasörü olarak belirleyin.Nasıl yapılacağını bilmiyorsanız hazırladığım dersi inceleyebilirisiniz...
Ders1 - Oluşturduğumuz Bir Klasörü Site Klasörü Olarak Tanımlama ve Düzenleme

Adım 4:
index.html dosyamızı açıyoruz.daha önceden hazırladığım alan üzerine bir kez tıklayın.O resim seçili hale gelecektir.Şimdi bu resim üzerinde birşeyler ekleyebilmek için photoshopun layer mantığını kullanacağınız.Html dilindede DIV dediğimiz kodlar layer mantığı ile çalışır.Onun için divlerle tasarım yapacağız.

Photoshop ve CSS ile Web Tasarımı

Şu anda açtığınız index.html dosysını incelerseniz.Sayfa başlarında <style></style> kodları arasında yer alan ve:

#index-03_ {
	position:absolute;
	left:219px;
	top:343px;
	width:365px;
	height:367px;
}
şeklinde kodlar bulunur.Bunlar CSS (Cascading Style Sheet) dediğimiz tasarım kodlarıdır.Bu kodlarla basit html sayfanızı muhteşem bir tasarıma dönüştürebilirsiniz.Üsteki kod bizim oluşturduğumuz alanın css kodudur.Biz ilaveten bir kaç kod daha eklersek sorun ortadan kalalacaktır.
Bizim sorunumuz seçili alana yazı yazmaya çalıştığımızda arkaplanın kaybolmasıdır.Divlerimiz hazır olarak eklendi.Şimdi CSS ile bu divin arka plan resmini belirlersek sorun ortadan kalakacaktır.Çözüm için CSS kodumuza şunları ekliyoruz:

	
	background-image:url(images/index_03.png);
	font-family:Calibri;
	font-size:16px;
	color:#FFFFFF;
	width:365px;
	height:367px;
Son Hali:
#index-03_ {
	background-image:url(images/index_03.png);
	font-family:Calibri;
	font-size:16px;
	color:#FFFFFF;
	width:365px;
	height:367px;
	position:absolute;
	left:219px;
	top:343px;
	width:365px;
	height:367px;
}
Photoshop ve CSS ile Web Tasarımı
Burada:
background-image:url(images/index_03.png); divimizin arkaplanını çağırıyor.Seçeceğiniz resim bizim alanımıza denk gelen resim olmalıdır.
font-family:Calibri;Bu alan içine yazı yazdığımzda hangi fontun kullanılması gerektiğini belirtir.
font-size:16px;Fontumuzun büyüklüğünü ayarlar.
color:#FFFFFF;Fontun rengini ayarlar.
width:365px;Div in genişliğini belirtir.Bunlar resim boyutu ile aynı olmalıdır.Yazmazsanız kaymalar meydana gelebilir.
height:367px;Div in yüksekliğini belirtir.Bunlar resim boyutu ile aynı olmalıdır.Yazmazsanız kaymalar meydana gelebilir.

Artık kodumuzu bitirdik.Görsel tasarım alanında geçerek o alan içine istediğiniz yazıyı yazabilirsiniz.Unutmayın oranın belli bir sınırı var.Tasarımlarınızı ona göre ayarlayın.Sınırı aştığınızda resimler kayacaktır.
Son olarak bu kadar CSS kodu sayfamızı şişirebilir.Bunun için bu kodları harici bir .css uzantılı dosyadan nasıl çağıracağımızı gösteriyim.

İlk önce <style></style> kodları arasındaki tüm kodları kesin.(Ctrl + X).
Site dosyaları arasında ör:"images.css" adında bir dosya olşturun.Açın ve tüm kodları buraya yapıştırın.(Ctrl + V).Ardından style kodlarını silin.

Photoshop ve CSS ile Web Tasarımı

<title></title> kodlarının altına şu kodu ekleyin.
<link rel="stylesheet" type="text/css" href="images.css" media="screen" />
Photoshop ve CSS ile Web Tasarımı

Son Hali:
Photoshop ve CSS ile Web Tasarımı

Yayında ve Yapımda Emeği Geçen AliEmre ye Teşekkür Ederiz...:rofl::rofl:

Çalışma Dosyalarını İndir
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

Yunus PARLAR isimli Üye şimdilik offline konumundadır

Yunus PARLAR(31)

Grafiker / İstanbul

Standart
Alt 25-06-2009 #2
                             Sponsorlu Bağlantılar
Emegine sağlık Ali Emre. Gayet açıklayıcı bir anlatım olmuş. :artipuan:
Bu mesajdan alıntı yap
Bayfresh isimli Üye şimdilik offline konumundadır

Bayfresh

Grafiker / Yurtdışı

Standart
Alt 25-06-2009 #3
#index-03_ {
position:absolute;
left:219px;
top:343px;
width:365px;
height:367px;
}

Bu bolum hatali. Bir kere content asla absolute position olarak yapilmamali. "absolute" position relative positionun icinde kullanilmasini tercih ederim.

Bence dogru kod bu:

#index-03_ {
margin: 343px auto;
width:365px;
min.height:367px;
}
Bu mesajdan alıntı yap
Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart
Alt 25-06-2009 #4
Açıkcası kodları incelemedim fazla aslında dediğin doğru.Fakat Photoshopun otomatik eklediği kodlar bunlar.Değiştirmek istemedim.

Teşekkür ederim Yunus Abi.Photoshop ve CSS ile Web Tasarımı
Bu mesajdan alıntı yap
filizdmr isimli Üye şimdilik offline konumundadır

filizdmr

Ressam / Kocaeli

Standart
Alt 25-06-2009 #5
Yararlı bir paylaşım olmuş teşekkürler Ali Emre, emeğine sağlık ,merdan düzeltme içinde teşekkürler.
Bu mesajdan alıntı yap
Bayfresh isimli Üye şimdilik offline konumundadır

Bayfresh

Grafiker / Yurtdışı

Standart
Alt 25-06-2009 #6
Açıkcası kodları incelemedim fazla aslında dediğin doğru.Fakat Photoshopun otomatik eklediği kodlar bunlar.Değiştirmek istemedim.

Teşekkür ederim Yunus Abi.Photoshop ve CSS ile Web Tasarımı
Evet Photoshopun HTML kodlandirmasi cok berbat Photoshop ve CSS ile Web Tasarımı

En guzeli photoshop da slice yapmak ve dreamweaverle xHTML kodlandirmasini yapmak degil mi hocam?
Bu mesajdan alıntı yap
Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart
Alt 25-06-2009 #7
Evet bende öyle yapıyorum zaten ama CSS yi bilmeyen arkadaşlar olduğunu düşünerek bu yöntemle anlattım.
Bu mesajdan alıntı yap
artdevil isimli Üye şimdilik offline konumundadır

artdevil(35)

Grafiker / Sakarya

Standart
Alt 25-06-2009 #8
emeğine sağlık yararlı bir paylaşım olmuş teşekkürler
Bu mesajdan alıntı yap
hüseyin010 isimli Üye şimdilik offline konumundadır

hüseyin010

Yrd. Grafiker / Hatay

Standart
Alt 25-06-2009 #9
Güzel paylaşım olmuş PS bize css kodlarnı direk veriyor mu ?
Yorumlarda PS nin verdği kodlarının kulanışlı olarak vermediği söyleniyor??
Bu mesajdan alıntı yap
Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart
Alt 25-06-2009 #10
Evet Output Settingsde dediğim ayarları yaptığınızda tüm css kodlarını html dosyasına entegre ediyor photoshop.Fakat arkadaşımızında dediği gibi fazla sağlıklı olmuyor.Gösterdiğim şekilde bazı kodları eklemeli veya düzeltmelisiniz.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
Freelance Sahne... bahtiyaralaman Freelancer İş Arayanlar 16 26-09-2013 18:04:34
Photoshop Dersleri: Şeffaf Menü Tasarımı Ali Emre Photoshop Dersleri 7 26-06-2009 08:20:45
photoshop web tasarımı yardım eceplaket Web Tasarımı 4 10-06-2009 15:14:13
Photoshop Dersleri: Web 2.0 Stilinde RSS Logo Tasarımı. AnıL Karahan Photoshop Dersleri 10 10-01-2009 04:04:17
Photoshop Ders:Hoş Bir Yazı Tasarımı DozeR Photoshop Dersleri 21 16-11-2008 17:56:24

Kapat
Şifremi Unuttum?