Kişisel Web Sitesi Tasarım Örneği #1
By husmen73 on Tem 20, 2008 in Web Tasarım
Kişisel bir web sitesine mi ihtiyacınız var? Bu örnek ile kişisel web sayfası yapımını öğreneceksiniz.
Kişisel Web Sitesi Tasarım Örneği
Adobe Photoshop ile 770x750px ve 72 dpi çözünürlüğünde boş bir dosya açın. Rectangle Tool (U) aracını kullanacağız.
Sayfanın tamamını bu araç ile içine alın ve layer’a tıklayarak Blending Options -> Gradient Overlay özelliğine tıklayın.
Gradient Overlay parametrelerini şu şekilde ayarlayın:
İşte sayfamızın tamamı #20201E kodundaki renk ile kaplanmış oldu.
Şimdi yeniden Rectangle Tool (U) aracını seçelim. Sayfanın üst tarafında kendinizin belirlediği alan büyüklüğünde bir tablo daha çizelim. Daha sonra ALT tuşuna basılı tutarak çizdiğiniz tablonun sağ tarafına yakın olacak şekilde ufak bir sütun ayıralım. İsterseniz aşağıdaki resimden örnek alarak yapabilirsiniz.
Bu layer’a sağ tıklayalım Blending Options -> Inner Glow özelliğini aktif edelim. Aşağıdaki resimlerden gerekli ayarları yapabilirsiniz.
Bu çizdiğimiz alana sitemizin yazar resmini ekleyelim. Boyutları çizdiğimiz alana uyduralım.
ALT tuşuna basılı tutarak, layer penceresinde altta kalan üst tablomuz ile resmimizin bulunduğu layer arasına mouse’unuzu getirin. Yuvarlaklı bir mouse ikon çıkacak. İşte bu ikon çıktığında bir kez tıklayınız. Tıkladıktan sonra alttaki resim gibi layerların dizilmesi gerek.
İşte resmimizin bu hali alması gerek.
Resminiz seçili olsun ve üst taraftaki araç çubuğundan Image –> Adjusments –> Photo Filter‘e tıklayın. Ayarları aşağıdaki resimde gösterilen gibi yapınız.
Buna benzer bir görüntünün ortaya çıkması gerek. Ya da siz ayarlarını nasıl isterseniz o şekilde değiştirin.
Kullanacağımız Brush setini indirelim. İndirmek için lütfen buraya tıklayınız. Sonra yeni bir layer oluşturun ve Opacity değerini 10% yapın. Daha sonra bu brushları Brush Tool (B) ile kullanın. Eklediğiniz resmin üst ve alt kısımlarını bu brushlarla biraz süsleyebilirsiniz. (Diğer adımda tekrar aynı süslemeleri kullanacağız) Brushlar, beyaz renk seçili iken eklenmesi gerekiyor, buna dikkat edelim. Brushları eklediğiniz layer, resminizin altında (resmin ve onun altındaki tablonun) olması gerekiyor.
Yeni bir layer daha oluşturun bunu Opacity değerini 20% olarak ayarlayın ve tekrar süslemeye devam edin. Brushlar, beyaz renk seçili iken eklenmesi gerekiyor, buna dikkat edelim. Brushları eklediğiniz layer, resminizin altında (resmin ve onun altındaki tablonun) olması gerekiyor.
Diğer Brush Setimizi indirelim. Buraya tıklayarak indirebilirsiniz. Yeni bir layer daha oluşturalım ve bu layerda sadece şimdi indirdiğimiz brush setini kullanalım. Brushları kullanırken farklı görüntüler elde etmek için boyutlarını ve rotalarını Free Transform aracını kullanarak değiştirebilirsiniz. Brushlar, beyaz renk seçili iken eklenmesi gerekiyor, buna dikkat edelim. Brushları eklediğiniz layer, resminizin altında (resmin ve onun altındaki tablonun) olması gerekiyor.
Şimdi yeni bir layer oluşturalım ve brush ayarlarını aşağıdaki gibi yapalım.
Yeni bir layer daha oluşturalım ve Vector Brushlarını bu layer üzerinde de kullanalım. Brushları kullanırken brush özelliğini Fill 20% olarak ayarlayalım. Brushları eklediğiniz layer, resminizin altında (resmin ve onun altındaki tablonun) olması gerekiyor.
Sıra geldi site başlığımızı eklemeye. Aşağıdaki gibi ayarlarını yapınız. (Pencereniz açık değilse Window –> Character) Eğer aşağıdaki yazı tipi sizde bulunmuyorsa, uygun bir tane sizde bulunanlardan seçebilirsiniz.
Yazınızı istediğiniz yere yazabilirsiniz. Biz resmin hemen sol üstüne yazmayı uygun gördük. personal ve page olarak iki yazı layer’ı oluşturmamız gerekmektedir. Öncelikle personal yazısı için ayarları yapıyoruz.
Yazı layer’ımıza sağ tıklayalım. Blending Options –> Outer Glow ayarlarını şu şekilde yapalım.
Şimdi Gradient Overlay özelliği ekleyelim.
Gradient Ovarley Parametreleri;
Şimdi ise page yazısı için page layer’ına sağ tıklıyoruz. Blending Options –> Outer Glow
Şimdi sitemizin menülerini yapalım. Rectangle Tool (U) ile menümüz için bir tuş çizelim.
Bu tuş için layer’a sağ tıklayın. Blending Options –> Gradient Overlay ayarlarını aşağıdaki gibi yapınız.
Gradient parametreleri:
Stroke özelliğide ekleyelim. #dc8824 rengini stroke için kullanabilirsiniz.
Bu tuş’un bir kopyasını oluşturun ve aşağıdaki gibi hızalayın.
Kopya tuş’un rengini değiştirelim. Kopya layer’a sağ tıklayın Blending Options –> Inner Glow
Arka plan renginden biraz açığını bunda kullanabilirsiniz.
Gradient Overlay özelliği ekleyelim.
Gradient parametreleri:
Stroke özelliği ekleyelim.
Gradient parametreleri:
Şimdi bu tuş’un kopyalarını çıkartın ve aşağıdaki gibi düzenleyin. İsterseniz kendinize yetecek kadar tuş ekleyin.
Rectangle Tool (U) aracını kullanarak turuncu tonlardaki tuş’un üzerine bir çizgi çekelim.
Şimdi menülerin isimlerini yazalım.
Genel olarak görünüm bizde şu şekilde oldu.
Bizdeki home page isimli layer’ın özelliklerini ekleyelim, sağ tıklayalım bu layer’a. (Size göre hangisi ana sayfa ise) Blending Options –> Stroke
#bb6703 rengini seçebilirsiniz. Tuş’un arkaplanından biraz daha koyu olursa iyi olur.
Diğer menülerdeki yazılar içinde şunları uygulayın. Blending Options –> Stroke
#383634 rengini kullanabilirsiniz. Tuş’un arkaplanından biraz daha koyu olursa iyi olur.
Yeni bir layer oluşturun ve tuş isimlerinin sol taraflarına üç tane noktacık yapalım. Bunu yaparken Pencil Tool (B) aracını beyaz renk olarak 1px boyutunda kullanalım. Aşağıdaki resimde bulunan örnekteki gibi üç adet noktacık yapalım.
Bu noktacıkları diğer tuş’larında önlerine ekleyelim. (Bunun için Duplicate Layer yaparak layer’ı çoğaltın. Çünkü her tuş’un noktacık layerının farklı olması gerekmektedir.)
Ana sayfamız için eklenen noktacık layer’ına Blending Options –> Stroke özelliği ekleyelim. Şu değerleri verelim;
Size: 1
Position: Outside
Color: bb6703
Diğer tuş’larada Stroke özelliği ekleyelim ve değerleri şu şekilde verelim;
Size: 1
Position: Outside
Color: 383634
Bunlarıda bitirdiğimizde tuş’larımızın görüntüsü şu şekilde olmalıdır.
Sonraki adımda Rectangle Tool (U) aracını kullanacağız. Sağ tarafta ayırdığımız alan için ana sayfam yap, favorilere ekle, email gibi tuş’lar ekleyeceğiz. Aşağıdaki resme benzer bir şekil çizin ve rengi #36322D olsun.
Yeni bir layer daha oluşturalım ve 1px büyüklüğünde, #998D7B renginde Pencil Tool (B) aracını seçelim. Aşağıdaki resimde gördüğünüz resimlerden size gerekli olanlarını çiziniz. (Resimi bilgisayarınıza indirip, taslağınızın üzerinede ekleyebilirsiniz 
)
Site yazarının resminin altında kalan iki bloklu resmin bir kopyasını çıkartalım. Resmi aşağı doğru biraz daha büyütelim ki tam sayfa olsun. Bu resmin rengini #2A251F olarak ayarlayalım.
Bu layer’a sağ tıklayarak Blending Options –> Inner Glow özelliği ekleyelim ve ayarları aşağıdaki gibi yapalım.
Şimdi tekrar Rectangle Tool (U) aracını seçelim. Sağ üst ve alt sağ tarafta menü oluşturalım. Alt sol blokta da içerik başlığını atalım. İlgili renkler resim üzerinde yazmaktadır. (Eğer eklediğiniz fotoğrafın arkaplan rengi farklı ise, tuş’ların arkaplan renginide kendiniz seçebilirsiniz.)
Ekleyeceğiniz her tuş’ta ki kelimeleri ayrı yazı layer’larında yapalım. (Çünkü, kelimeleri renkli yapacağız) Aşağıdan yazı ayarlarını yapın ve yazılarınızı yazın.
Şimdi ilk kelimelerin renklerini ayarlayalım. İlk kelimenin layer’ına tıklayarak Blending Options –> Gradient Overlay özelliği ekleyelim. Ayarları aşağıdadır.
Gradient parametreleri:
“Welcome to my page” isimli bir yazı oluşturalım. Tabi yine “welcome to” ve “my page” kelimelerini ayrı ayrı yazalım. (Sizde sitenizi ingilizce kullanmayacaksanız, “Web siteme hoşgeldiniz” diye bir yazı oluşturun. “web siteme” ve “hoşgeldiniz” kelimelerini ayrı ayrı yazın.) Yazı ayarlarını aşağıdan yapabilirsiniz.
Menüde yaptığımız layer özelliklerini aşağıdaki resim gibi tekrar kelimemize aktaralım.
Şimdi Rectangle Tool (U) aracını alın ve aşağıda resimde gördüğünüz gibi veya kendinizin seçimi doğrultusunda kutucuklar ekleyin. Bu kutucuklarda haberlerimizin resimleri olacak.
Bu kutucukların stil ayarlarını şu şekilde yapın Blending Options –> Stroke
Görünüm bu şekle benzer olmalı.
Bu kutucuklara ilgili haber resimlerini ekleyelim. Kutucukların dışına taşmaması için yazar’ın fotoğrafını eklerken yaptığımız gibi ilgili kutucuğun layer’ı ile ilgili haber resminin arasına ALT tuşu basılı iken tıklayalım. Tüm haber resimleri için bu işlemi uygulayalım.
Yeni bir psd dosyası açalım ve boyutları 1px genişliğinde, 2px yüksekliğinde olsun. Pencil Tool (B) aracını seçerek 1 px büyüklüğünde #363331 bir noktacık yapalım. Arkaplanın boş olmasına dikkat edelim. Yoksa bu pattern’i kullanırken beyaz noktacıklarda çıkacaktır.
Edit –> Define Pattern özelliğini uygulayalım. Artık bu psd dosyasını kapatabiliriz. Tasarım sayfamıza gelelim. Line Tool (U) aracını kullanarak #38322C renginde bir çizgi oluşturalım.
Bu çizgi layer’ına Blending Options –> Stroke özelliği ekleyelim. Ayarları aşağıdadır.
Ardından buna benzer bir görüntünün çıkması gerekiyor.
Şimdi bu çizgiye scroll efekti ekleyelim. (İsterseniz bu adımı atlayarak sadece çizgi ile haberleri ayırabilirsiniz) Rectangle Tool (U) aracını seçin ve resimdeki gibi #67584A renklerine sahip ufak bir dikey çizgi daha oluşturun.
Tasarımımız bitmek üzere, şimdi yazı renklerimizi ayarlayalım.
Kullanışlı linkler için bu ayarları yaparak link ekleyin.
Normal linkler için ayarlar;
Yazılarımızda ilk cümlede kullanacağımız yazı ayarlarımız;
bunlarda normal yazıda kullanacağımız renk ayarlarımız;
Sonuç olarak şöyle bir görünüm olmalıdır.
Kullanışlı linklerin layer’ına şu ayarları yapalım Blending Options –> Stroke
Yeni bir layer oluşturun ve linklerin yanlarına yine 3-4 noktacıktan oluşan noktacıklar ekleyin.
Son olarak sitemizin Copyright kısmını yazalım ve tasarımımızı bitirelim. bunun için yazı ayarları aşağıdadır.
Kişisel web sitemiz bitmiştir. Eğer bu yazıyı alıntı yapmak isterseniz lütfen web sitemizin adresini yazının hemen altına ekleyiniz. Saygınıza teşekkür ederim.
Tam boy olarak görmek isterseniz aşağıdaki resime tıklayınız.
Kişisel Web Sitesi Tasarım Örneği
abi mükemmel bi bilgi eline sağlık
imdat | 9 Eyl 2008 | Yorum yaz
Çok güzel bir paylaşım. Teşekkürler…
Mustafa Temel | 14 Şub 2009 | Yorum yaz
Abi mükemmel birşey bunu arıyordun bende tam istediğim zamanda karşıma çıktın çok teşekkürler bu tip çalışmalarının devamını diyoruz abi
Saygılarımla
Ahmet KAYAR | 18 Mar 2009 | Yorum yaz
Zaman buldukça bunun gibi örnekler yayınlayacağım Ahmet. Kolay gelsin, yardımcı olabildiysem ne mutlu
husmen73 | 18 Mar 2009 | Yorum yaz
bir photoshop programı kullanıcısı olarak böyle bir bilgiyi paylaştığınız için çok teşekkür ediyorum.
nisa | 19 Mar 2009 | Yorum yaz
ALT tuşuna basılı tutarak, layer penceresinde altta kalan üst tablomuz ile resmimizin bulunduğu layer arasına mouse’unuzu getirin. Yuvarlaklı bir mouse ikon çıkacak. İşte bu ikon çıktığında bir kez tıklayınız. Tıkladıktan sonra alttaki resim gibi layerların dizilmesi gerek.
Ben burayı yapamadım teşekkürler
mesut | 8 Nis 2009 | Yorum yaz
Mesut,
Ekleyeceğin resimin layerını, haber kutucuğunun layer’ının üstüne getir. (Yani layerın üzerinde kalsın) Daha sonra resimin layerını seç, ve alt tuşuna basılı tutarak mouse’u bu iki layer arasına getirirsen farklı bir işaret göreceksin mouse’ta. İşte o zaman mouse’ta ki tık’ı bırakırsan olacaktır. Yapamazsan video çekerim senin için.
Kolay gelsin.
husmen73 | 8 Nis 2009 | Yorum yaz
Paylaşımınız için teşekkürler fakat alıntı yaptığınız yeri yazsaydınız keşke.tamam türkçeye çevirmişsiniz fakat yinede size ait bir çalışma gibi göstermeniz hoş değil.
alıntı yapılan adres:
adobetutorialz.com/articles/2967/1/Making-your-own-portfolio-web-page
hipokondriyak | 2 May 2009 | Yorum yaz
tamam herşey güzelde bunu yapmak için bi programa ihtiyacımıza var sanırsam ama o programın adı ne nerden indirmemiz lazım onları paylaşsanız
Secret | 11 Haz 2009 | Yorum yaz
Merhaba Secret,
Adobe Photoshop CS3 programını indirebilirsiniz. http://www.adobe.com
husmen73 | 12 Haz 2009 | Yorum yaz
“Paylaşımınız için teşekkürler fakat alıntı yaptığınız yeri yazsaydınız keşke.tamam türkçeye çevirmişsiniz fakat yinede size ait bir çalışma gibi göstermeniz hoş değil.
alıntı yapılan adres”
Ben burada paylaşması bile güzel birşey..
Teşekkürler.
maliser | 22 Haz 2009 | Yorum yaz
arkadaşım çok güzel olmuş. teşekkürler. yalnız bir ricam daha var. ben bunu aynen yaptım. lakin dreamveavera nasıl atcam. onu da anlatırmısın.
ibrahim | 1 Ağu 2009 | Yorum yaz
çok başarılı.
Seydi ESER | 19 Eki 2009 | Yorum yaz
Dreamviewer’da kullanmak için sol panelde ki Slice Aracını kullanmalısın. Bu araç ile resimleri parçalayıp uygun yerlere html olarak eklemelisin. Bununla ilgili örnek video kaydetmeyi düşünüyorum. Sizin gibi bu tür tasarımları htmle aktarmayı henüz bilmeyen arkadaşlarımız var. Sanırım bu video ile öğreneceksiniz.
husmen73 | 20 Eki 2009 | Yorum yaz
tesekkürler paylasim icin
ibrahim | 20 Eki 2009 | Yorum yaz
qAYett baŞarılı :::)
TuqBa şaHİn | 11 Kas 2009 | Yorum yaz
slm paylaşımınız için teşekkür ederim ama bişey sormak istiyorum bu site örneğini html olarak kullanabiliyomuyuz?
MERVE | 23 Kas 2009 | Yorum yaz
Merhaba,
örneği photoshopta hazırladıktan sonra Slice Tool ile parçalara ayırıp HTML’e aktarmanız gerekmektedir. Bunu bir örnekle göstermeyi çok istiyorum ancak zaman bulamadığımdan dolayı henüz bunu anlatamadım.
husmen73 | 25 Kas 2009 | Yorum yaz
Hocam sizin sayenizde çok güzel şeyler öğreniyoruz.Teşekkürler…
İyi bayramlar…
Hakan | 30 Kas 2009 | Yorum yaz
çok güzel bi paylaşım fakat:ben photoshop u bilmiyorum….ileri ki zamanlarınızda fireworks ile bir site tasarımı yaparsanız süper olur….bir de bu özelliklerin hepsi fireworks da var mı acaba…
sertac | 13 Ara 2009 | Yorum yaz
“ALT tuşuna basılı tutarak, layer penceresinde altta kalan üst tablomuz ile resmimizin bulunduğu layer arasına mouse’unuzu getirin. Yuvarlaklı bir mouse ikon çıkacak. İşte bu ikon çıktığında bir kez tıklayınız. Tıkladıktan sonra alttaki resim gibi layerların dizilmesi gerek. ”
Malesef ben de yapamadım.
Kumsal | 30 Ara 2009 | Yorum yaz
Kumsal, doğru layer ile çalışıp çalışmadığınıza dikkat edin. Yanlız layer’ı sürüklüyor olabilirsin.
husmen73 | 31 Ara 2009 | Yorum yaz
Resmi, masa üstündemi sürükleyeceğim nasıl olacak.Sürükleyince yaptıklarım kayboluyor.
Can | 6 Oca 2010 | Yorum yaz
Çok Güzel olmuş kardeş eline sağlık …
Mustafa Bilgin | 6 Oca 2010 | Yorum yaz
~Can, hangi adımı yapamadın?
husmen73 | 12 Oca 2010 | Yorum yaz
“Bu çizdiğimiz alana sitemizin yazar resmini ekleyelim. Boyutları çizdiğimiz alana uyduralım”
Bu kısımları yapamadım.
Can | 15 Oca 2010 | Yorum yaz
ben web tasarımcıyım gercekten profesyonel bır calısma bunun sayesınde bazı bılmedıklerımı ogrendım elıne koluna saglık sıtede yayınlayanlarınında eline emeğine sağlık devamı gelırse sevınırım
barlas | 15 Oca 2010 | Yorum yaz
~Can, çizilen dikdörtgen alana maskeleme seçeneğini uygulayacaksın orada. Layer’a sağ tıklayıp Create Mask’a da tıklayabilirsin.
~barlas, teşekkürler. Müsait olduğum zamanlarda eğitici birşeyler eklemeye çalışıyorum.
husmen73 | 15 Oca 2010 | Yorum yaz
tebrik ediyorum çok güzel bir çalışma olmus.
zeynep | 20 Oca 2010 | Yorum yaz
size nasıl ulaşabilirim..web sitesi hakkında yardıma ihtiyacım varda….
beytullah | 31 Oca 2010 | Yorum yaz
Paylaşım cok güzel olmuş ellerinize sağlık…
s R c | 3 Şub 2010 | Yorum yaz
kişisel web sitemde sohbet hattı açabilir miyim ? nasıl olur ?
fatih | 5 Şub 2010 | Yorum yaz
çokk güzel olmşB:)xD
duygu büşra | 11 Şub 2010 | Yorum yaz
elinize sağlık çok güzel olmuş bende su an web tasarım kursuna gidiyorum bizim kullandığımız bu photoshop prg. türkçesi ingilizce cümlelerin yanına parantezle türkçesini yazarsanız çok memnun olurum
karamelek | 12 Şub 2010 | Yorum yaz
Merhaba ~karamelek,
Programı Türkçe kullanmanız ne kadar doğru bilmiyorum. http://www.zargan.com adresinden kelime çevirilerini yapabilirsiniz.
husmen73 | 12 Şub 2010 | Yorum yaz
tesekkurler
sultan | 20 Mar 2010 | Yorum yaz
Lorem ipsum dolor sit amet
john doe | 24 Mar 2010 | Yorum yaz
Ben de kişisel bir web sitesi hazırlamak istiyorum fakat adobe photoshop bende yok internetten indirmeyi denedim indiremedim bu konuyla alakalı 2srum olacak bu program ücretli ve nereden indirebilirim
Alperen ŞAFAK | 26 Mar 2010 | Yorum yaz
http://www.adobe.com sitesinden indirebilirsiniz. Ancak deneme sürümü mevcut.
husmen73 | 26 Mar 2010 | Yorum yaz
Arkadaşlar ben de resim ekleyemedim yaa:( acilen gerekli
Aydanur | 26 Mar 2010 | Yorum yaz
daha önce photoshop programı kullanmadım ve zorlanıyorum :/ ödevim kişisel web sitesi yapmak çok güzel acıklanmıs fakat biraz daha detay :/
Aydanur | 26 Mar 2010 | Yorum yaz
yazı yazamadım resmen ya
herseyi denizldiği gibi yapıyorum fakat yazdıgım gözükmüyor:(
Aydanur | 28 Mar 2010 | Yorum yaz
Yazdığınız yazı, alt layerlarda kalıyor olabilir. Üstlere taşımayı deneyin.
husmen73 | 28 Mar 2010 | Yorum yaz
yazım sectiğim yerde gözükmüyor ne yazıyosam layerin adını yazıyor.video ekleyebilir misiniz ?
Aydanur | 28 Mar 2010 | Yorum yaz
Hangi adımda bu sorunu yaşıyorsunuz? Ekran görüntüsü gönderirseniz yardımcı olmaya çalışırım.
husmen73 | 28 Mar 2010 | Yorum yaz
Teşekkürler ben de yaptım çok hoş oldu.İlk ps projemi yapmış oldum diyebilirim.
Barış | 30 Mar 2010 | Yorum yaz
nasıl göndericem ?
Aydanur | 31 Mar 2010 | Yorum yaz
“PrintScreen” veya “PrtSc” yazar klavyede. Sorun yaşadığınız yerin ekran görüntüsünü almak için bu tuşa basınız. Ardından bir paint dosyası açın ve CTRL+V tuşlarına basınız. Dosyayı JPG olarak kaydedin ve imageshack.us sitesine yükleyin. Linkide buraya yazın, bakalım.
husmen73 | 1 Nis 2010 | Yorum yaz
ya bende o maskeLemeyi yapıorum ama resim gözükmüo :S yardımcı oLur musunuz ?
ırmak | 7 Nis 2010 | Yorum yaz
Irmak hanım, Layer sıralamasına dikkat ediniz.
husmen73 | 9 Nis 2010 | Yorum yaz
teşekkürler işime yaradı.
fatih | 31 May 2010 | Yorum yaz
gerçekten çok başarılı devamını bekliyoruz…teşekkürler
elif | 5 Haz 2010 | Yorum yaz
Arkadaş uğraşmış türkçeye çevirmiş yayınlamış,hala alıntı diye mızmızlanan arkadaşlar var çok biliyosan kendin hazırlada millet faydalansın..Dostum paylaşım için teşekkürler…
SMART | 7 Tem 2010 | Yorum yaz
Çok yararlı ve güzel bir paylaşım, elinize, dilinize ve emeğinize sağlık… Teşekkürler.
Uğur Mürekkepçi | 1 Eki 2010 | Yorum yaz
gerçekten çok faydalı bir çalışma olmuş,elinize sağlık,tşk ederimmmm……
Mürsel Dedeoğlu | 3 Eki 2010 | Yorum yaz
Eline sağlık kardeşim………
Can | 6 Eki 2010 | Yorum yaz
tasarım harika tebrik ederim. bunu hangi programla yapıyoruz onu anlayamadım :S
Hüseyin | 10 Kas 2010 | Yorum yaz
Hocam bu tasarımı spice ile aktarmayı boş bir zamanınızda ders şeklinde yayınlarsanız gerçekten iyi olur.
Hakan | 18 Kas 2010 | Yorum yaz
Herşey çok güzel ama bunu nasıl html’ye geçireceğim hocam?
Arda | 21 Kas 2010 | Yorum yaz
çok güzel ama bizim hoca bunu dosyayya yapın dio onu nasıl yapcezzzz
lovestra | 23 Kas 2010 | Yorum yaz
gerçekten harika birşey yapacğm ödev için çok yardımcı oldu hazırlayann eline koluna sağlık
esra | 4 Ara 2010 | Yorum yaz
Bir çok kişi tasarımı kodlara dökmeyi soruyor, sanırım kısa sürede hazırlamak zorunda kalacağız
Müsait bir zamanda bunu hazırlamayı göstereceğiz.
husmen73 | 8 Ara 2010 | Yorum yaz
ne biçim ste anlamadım nerde müşteriye hoş grş nerde yorumlara cvp . yorum yapıyruz bı bakıyoruz yrmu slmiş
arabeks kraliçesi | 24 Oca 2011 | Yorum yaz
Burası yardım isteme sitesi değildir. Bilgiler sunulur ve alıcılar istediğini alır. Eğer herhangi bir konuda hizmet almak istiyorsanız iletişim formunu kullanınız. Bunun haricinde yapılacak herhangi bir yoruma cevap verme zorunluluğumuz bulunmamaktadır.
husmen73 | 24 Oca 2011 | Yorum yaz
Ben de bir web sitesi yapmak istiyorum.Bu bilgilerin çok yardımı olacağına inanıyorum.Ama benim bu işle ilgili hiç bilgim yok, inşallah bu bilgilerin bir faydası olur da bir web site kurarım..Bilgilerini bizimle paylaştığın için teşekkürler…
28 Ocak 2011 Cuma 15:00
Mehmet Karaküçük | 28 Oca 2011 | Yorum yaz
bu siteynn tasarımını yaptk ii hoş da bunu nasl dreamvier ile linklerini flan nasl vercez nasl oraya aktarablrz yani !!!
BEHCET | 17 Mar 2011 | Yorum yaz
BEHCET arkadaşım bu .psd yi oluşturduktan sonra bunu xhtml e dökmen gerekiyor. yani html kodlarını bilmen gerek. Sakın bölerek yapmayın photoshopta css le çalışın.
Khangeseka | 24 Mar 2011 | Yorum yaz
Çok teşekkür ederim bilgiler için herşey 10 numara olmuş saolun.
magazaurunkoruma | 1 Nis 2011 | Yorum yaz
paylaşım için teşkkür ederim
urunkoruma | 1 Nis 2011 | Yorum yaz
Arkadaşlar sitemi çok güzel yaptım sayenizde.
urunkoruma | 1 Nis 2011 | Yorum yaz
urunalarmi | 1 Nis 2011 | Yorum yaz
Empire data bu siteyi beğendi
empiredata | 1 Nis 2011 | Yorum yaz
bu .psd yi oluşturduktan sonra bunu xhtml e dökmen gerekiyor
renklikalemler | 1 Nis 2011 | Yorum yaz
evet renklikalemler doğru söylüyor
guvenlikkamerafiyatlari | 1 Nis 2011 | Yorum yaz
Arkadaşlar nasıl yapıonuz? ben nie beceremiom?
tolgatrafik | 1 Nis 2011 | Yorum yaz
bu orta bloktakı asagı çekme butonunu nasıl kullanabılır yapıcaz .yanı cekınce asagı nasıl ınecek
ferhat | 15 Nis 2011 | Yorum yaz
Gerçekten çok güzel yaptınız ve anlattınız. bende deneyeceğim. saolun.
barkodalarm | 18 Nis 2011 | Yorum yaz
Paylaşım için çok teşekkür ederim. Bende Deneyeceğim.
Prematüre Bebekler | 25 Nis 2011 | Yorum yaz
ALT tuşuna basılı tutarak, layer penceresinde altta kalan üst tablomuz ile resmimizin bulunduğu layer arasına mouse’unuzu getirin. Yuvarlaklı bir mouse ikon çıkacak. İşte bu ikon çıktığında bir kez tıklayınız. Tıkladıktan sonra alttaki resim gibi layerların dizilmesi gerek.
Burayı Yapamadım Acıl Yardımcı Olursanız Sevınırım Tesekkurler…
Tugay | 4 May 2011 | Yorum yaz
Merhaba Tugay bey,
O kısmı şu şekilde de yapabilirsiniz. ilgili 2 layer’ın üstte olanına sağ tıklayın ve “Create Clipping Mask”a tıklarsanız ALT tuşu ile yapılan işlemin aynısını yapmış olursunuz.
husmen73 | 4 May 2011 | Yorum yaz
DEnedım Olmadı Yıne Bana baska Sekılde Yardımcı Olabılır Mısınız …
Tugay | 4 May 2011 | Yorum yaz
Eğer Bu Projeyı Sılmedıysenız Bana Yollaya Bılrı Msıınız … SAkıncası Yoksa …
Tugay | 4 May 2011 | Yorum yaz
Maalesef bu tasarım şu an da elimizde bulunmuyor. Takıldığınız adımda gösterilen resimde gördüğünüz iki layer’ın üstte olanına sağ tıklayın ve Maske (Create Clipping Mask’a tıklayın) oluşturun. Başka nasıl yardımcı olabiliriz, bilmiyoruz.
husmen73 | 4 May 2011 | Yorum yaz
Tmm Tskler …
Tugay | 4 May 2011 | Yorum yaz
husmen73 Bey…
Sizin DEdiğinizi Yaptığımda REsım KAyboluyo Alt Takı LAyer Ortaya Cıkıyo…
Tugay | 5 May 2011 | Yorum yaz
Tugay bey,
Eğer adımları doğru yaptıysanız şu resimde ki gibi bir görüntü elde etmeniz gerekiyor.
http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial370/8.jpg
İki layer arasında ok işareti var. Bunu yapabilmek için layer sıralaması bu şekilde olmalıdır. Bayanın olduğu resime sağ tıklayıp Create Clipping Mask derseniz aynen resimde ki gibi görüntüyü elde edeceksiniz.
husmen73 | 8 May 2011 | Yorum yaz
süper bir yazı oluşturmuşsunuz tşk.
Mesut | 12 Haz 2011 | Yorum yaz
çok yararlı olmuş teşekkürlerrrr
muhterem | 23 Haz 2011 | Yorum yaz
Ah Keşke kardeş photoshopla bitse.Daha bunu CSS olarak kodlaması var kodları düzenlemesi var FTP den hosta atması var varda var.Bu kadar kolay olsa webb tasarımcılar ne diye var ?
Faruk | 15 Tem 2011 | Yorum yaz
arkadaşlar bu siteyi internete nasıl atıyoruz. Google da nasıl indeksleniyoruz ?
Tarık | 4 Ağu 2011 | Yorum yaz
Bence örnek bu haliyle resimden başka birşey değil.Siteyi aynen yapsan bile Dreamweaver gibi programlara aktarmak her babayiğitin işi değil.
Onur Yılmaz | 30 Kas 2011 | Yorum yaz
Tasarımlar olmadan html düzenleyici programları herhangi bir işe yaramayacağından dolayı bir yerden başlamak gerekiyor. Müsait olmadığımız için bu tasarımın html’e aktarılmasını henüz anlatamadık.
husmen73 | 30 Kas 2011 | Yorum yaz
zafer
zafer | 12 Ara 2011 | Yorum yaz