hazirlanan dizayn'i PS ile parcalama..

[hiko]

En gıcık aldığım konulardan birisi, hazirliyorum dizayni. geliyoruz parcalamaya. image ready'e jump ediorum.
sonrada Slice ediorum.
kendini bölüyor. ama bu tasarimi htmlye cevirdigimde background image olarak. sayfa parcalamasi hem yanlis oluor. hemde sayfa yavas acilior.
bir siteyi nasil parcalamalıyım? ve sitenin hızlı acılması icin ne yapmalıyım? bu konuda aydinlatirsaniz sevinirim.

[fatihhayri]

Bu işi eğer photoshop veya imagereday bırakırsanız. Yaptığı html kodlama esnek olmayacaktır sayfada bir şeyi değiştirdiğinizde sayfada dirğer resimleride tkliyecektir. Tabi yaptığınız tasarım düz satır ve kolonlara ayırmadı iseniz.

Bence ki bende böyle yapıyorum. Tasarımı parçalamadan tasarımınızda metin ve remi olacka yerleri ilk olarak karar verin.

Daha sonra resim olacak yerleri .gif ve jpg olma ihtimalinide göze alarak bati parçalara bölün.

Bu işlemin sonucudan bir html oluşturun.

Daha sonra oluşturduğunuz basit parçalarıda tek tek ele alarak daha optimize parçalar oluşturarak htmlinizi yapın.

Niye ilk olarak direk photoshop veya imageredey ile bu işi yapmadıkta aşama şama yaptık derseniz. Adobe aile bu işi yaparken eğer bölme işlemi biraz karışık olursa html e çeriirken tablo genişlik ve yükesekiklerini ayarlamak için tablonun son kolonu ve son satırına space.gif ilerle tablo genişlik ve yüksekliklerini ayarlyan kodlar eklemekte ve bu kodlar sizin
değişiklikleriniz büyük ölçüde engellemektedir.

kolay gelsin.

[Ateşbalığı]

Ben burada bahsettiğim şekilde parçalıyorum (http://forum.ceviz.net/showthread.php?t=9386)

*Sitenin hızlı açılması için zaman zaman tasarımdan ödün vererek az imaj kullanmak gerekir.(ben hiç yapmam,site portal değilse)

*İmajların kalitesinden ödün vermek gerekebilir (ben hiç yapmam)

*Bir imajı gif ve jpg olarak deneyip en az size hangisi tutuyorsa o formatta kaydederim.İllede gif olacak diye bir takıntım yoktur. (Bir arkadaşımın böyle bir takıntısı vardıda :) )
*Luzumsuz kodlardan temizlemek gerekiyor.
*İyi bir host la anlaşmak gerekir.


*Site flash sa daha da farklı kıstaslar giriyor işin içine tabiki.
*Ağırlıklı olarak flash ın toollarını kullanmak gerekiyor tasarımda.
*AS nin nimetlerinden yaralanmak gerkiyor.

*Bunun dışında aklıma bişey gelmiyor :) çok da fazla önemsemiyormuşum anlaşılan.

Sevgiler,

[hiko]

"fatihhayri" yani demek istiyorsunki kendin photoshopda hazirladigin bir dizayni parcalara ayir teker teker kaydet. ve daha sonra htmlde tablo olustur ona gore at? yoksa normal parcalama yaparken kendin parcalamalari ayarla sonra htmlye cevir? ya acik acik konusalim.. ben www.aytacdurak.com sitesini dizayndan htmlye dönüstürdüm. bundan onceki yaptiklarimdada ayni hatayi verdi nedense? yani siz bu isi bilenler olarak. hazirladiginiz bir tasarimi nasil htmlye ceviriorsunuz? ve HIZLI acilior? nelere dikkat ediorsunuz? demek istedigim bu..

[Ateşbalığı]

Bunların hepsi image ,kodlarında arattım birtane font face"verdana" yada class="bilmem ne" yok. ?????

*Ana tablonun backine gri tonunu verip yada 1*1 lik bir image döşeyip,sadece imaj olan yerleri tek tek kesip ilgili tabloların ilgili td lerine yerleştirmen gerekiyor.Bunlarıda tek tek kesmen gerekiyor.

Sevgiler,

[hiko]

evet bunlarin hepsi image. iste bende bunu diorum. bu yuzden gec acilior. yapan kişiler nasil yapior? bunu anlamış degilim? ben ne yapmalıyım parcalarken yada parcaladıktan sonra? ne yapmalıyım?

[Ateşbalığı]

Burada anlatmak istediğimi anlamadığını varsayarak, ki bazen yazdıklarımı ben bile anlamıyorum :) (http://forum.ceviz.net/showpost.php?p=84153&postcount=2)

1.Tasarımı photoShop da yaıyorsun.Tarayıcında görmek istediğin son haline getiriyorsun.

2.Daha sonra bunu HTML e aktaramak için tek tek parçalıyorsun.Parçalama işlemini kolaylaştırmak için ben bu yöntemi kullanıyorum.

Yani- Ps de en bütün layer lerin en üstüne bir set açıyorum bu set çine her bir butonu falanı filanı ayrı layerlerda renklendiriyorum.Daha sonra bu layerler konturol tuşunuda kullanarak seçiyorum ve bu layerı görünmez yapıyorum.

Seçtiğim alanı yeni bir sayfada açıp ctr+alt+shift ile kaydediyorum.

Kaydettiğim layer görünme z olduğu için sadece görünürlerin kaydedilmemiş olduğunuda bilebiliyorum.Birde bu renkli layerlra herbirine ilgili bir ism veriyorum ki daha sonra değişiklik yapmam gereken alana kolay uaşim ve seçim diye

ayrıca bu layerları seçtiğimde ise bu alanın yü+sekliğinide uzunluğnuda bilebiliyorum.Tablolarımı oluşturuken de işime yarıyor.

Umarım anlatabilmişimdir.

Kestikten sonraki işlem için ise biraz css ve html öğrenmeniz gerekiyor kanatindeyim.İnternette oldukça fazla döküman var bunlar için.

Sevgiler,

[hiko]

ama ben senin dilinden anlayabilemiyorum :) neyse sanirim anlatamicam ben? neyse cooook saolun.

[Ateşbalığı]

Anlayamaman çok doğal ,diyorum ya ben bile anlayamıyorum bazen :) ama bu son halini anlamış olman gerkiyor yaptığım imageyi incele.Bunun ps halini düşün.

Ps bilgin nekadar bilmiyorum ama.Layer ,set nedir biliyorsundur herhalde.

Ki ayrıca bu benim işimi kolylaştırmak için yaptığım birşey.Sende kendine bir yöntem geliştirebilirsin.

örnek, bir butonu nasıl seçip kaydedeceğine ilşkin,yukarıda anlatıklarımı unut :)

hakkımızda butonu için konuşuyorum :

Hakkımızda butonu nu marquee tool la seçtin.
Seçili alanı ctr+shift+c(seçili alan içindeki bütün layerleri hafızaya alır.) ile hafızaya aldın.
Hafızaya aldıktan sonra ctrl+n dedin ve yeni bir sayfa açtın.Hafızadakinin sizesi kadar bir sayfa açar.
Açtığın sayfaya ctrl+v ile yapıştırdın.

Daha sonra ctrl+alt+shift e aynı nada basarsan hdd ne kaydedebilirsin.Hakkımızda butonunu.

Anlaşılır oluyorsa devem edim :)


Sevgiler,

[hiko]

evet yani diorsunki butonlari ordan kaldir teker teker olustur? diorsun.. ee teker teker olusturaim daha sonra?

[Ateşbalığı]

Evet Hiko :) teker teker herbişeyi gif yada jpg formatında kaydettin image klasörüne.

İş bundan sonra HTML e düşüyor.

html içinde tablolar açıyorsun tabloların ilgili td lerine ilgili imageyi image klasöründen çağırıyorsun.img src tagini kullanrak.Yada o şey buton ise a href tag ini kullanıyorsun.

Tabi dediğim gibi bunları burada anlatmam çok luzumsuz olur.Biraz html,css çalışman gerkiyor.Çok fazla döküman var nette bunlara ilşkin.

www.webdersleri.com fazlasıyla işini görür.Çalışırken anlamadığın birşeyler olursa sorabilirsin.

Kolay gelsin, Sevgiler,

[hiko]

tmm simdi anladim. senin demek istedigini. o zaman benim parcalamamda hic bir sorun yok. ben iyi parcaliorum tek bir sorun varki. oda butonlari direk photoshopda atiorum onlari teker teker buton yapip sonra htmlde tablolarin icine atsam daha iyi olur ve daha hizli acilir. hmm.. hizli olmasi acisindan bunlar.. cok saol :b

[Ateşbalığı]

*Birde yazı olan yerleri html de yazman hızlı açılması açısndan çok önemli.(tabi daha birçok açıdan çok önemli.)

*Birde tekrar eden renkleri bgcolor="#CCCCCC" gibi tablonun background una renk vererk halledebilirsin.Böyle birşey için imaj kesmene ve kullanmana gerk yok.Ayrıca sitenin sizesinide boşuboşuna şişirmemiş olursun.

Anlaşılmış olmak güzel :) zira yazarak kendimi anlatamamk gibi ciddi bir derdim var :)

Beni anladığın için ben teşekkür ederim. :)

Kolay gelsin,sevgiler,

[hiko]

:) haueah yok yok ben tesekkur ederim. evet bende biliorum yazili bolumleri ama indexi oyle yapayim demistim sadece :p bakarsin degistirrim. önemli olan o degil. Türkiye belediyeler başkanı Aytaç Durak'dan para koparabilmek :p

[Ateşbalığı]

Bence yeni başlıyorsan ki eskide olsan hiç farketmez,önemli olan gururla yaptığın işi sunmak .
Bu anlamda sen bu referansala benim karşıma gelsen ben direk senin cv ni en altlara atarım.Bu adam bu işi bilmiyor,yada çok tembel derim.(bu benim düşüncem,dua et de web şirketim falan olmasın :))

Bir işe nasıl başlarsan öyle gider,işi usulüne göre yapmaya çalışman gerkiyor bence.Tabi eğer bu işi bir meslek olarak görüyor,bu işten ekmeğini kaznmayı düşünüyorsan.

Eğer öyleyse bunlar senin referansalrın olacak.Bu sektörde diplomadan çok referans iş yapıyor.Diplomayı önemsizleştirmeyorum yanlış anlaşılmasın.

Kolay gelsin,Sevgiler,

[hiko]

peki beni daha iyi tanisan o zaman elimden öpeceksin:p
-
Evinde bilgisayarin yok
Çalıştığın bir şirket yada işyeri yok
Cafeye verecek paran yok
Takıldığın ve yardım ettiğin bir cafe var
İstediğin bilgisayar özellikleri ve istediğin herşeyi yapma özgürlüğün yok
Kendini geliştirebilecek imkanların ve istediğin hiç birşey yok.
-
böyle bir durumdaki adamdan ne yapmasını beklersin?