Grafik ve Site Tasarım

[olitere]

Sevgili patiler bu konuda insanlara avuç açmaktan sıkılmış bulunmaktayım.Photoshop ve web tasarım konusunda sıfırdan başlıyan bir insan için yararlı dökümanlar bulunduran site linkleri veya makaleler paylaşırsanız minnettar olurum

[di]

Tasarim dedigimiz sey kisaca senin hayal gucun. O yuzden ne yapmak istedigini ufak parcalara bolup (site icerisinde butonlar ve kutucuklar olmasini istedigini varsayarsak) belirleyip nasil yapacagini arastirmak en kolayi olacaktir.

Bunun yani sira bazi standartlari bilmen gerek. Aklima geldigi kadariyla listelemeye calisayim;

* PSD dosyanin Resolution degeri 72 olmali. Diger turlu tasarim ile ortaya cikan urun birbirinden cok farkli olacaktir.
* Duz yazilarda anti-aliasing kullanmamalisin.
* Sitede imaj haricinde yer alacak yazilar Arial, Helvetica gibi bilinen font'lar olmali.
* Sabit bir site genisligin olacaksa bu cesitli cozunurluklere uyacak, artik standart genislikler kabul edilen genislik degerlerine yakin olmali. Hala 1024x768 cozunurluk kullanildigini varsayarsak her turden ziyaretci bekledigin bir sitenin maksimum genisligi 980-990 pixel olmali.

Bu sonuncusu da tasarimcilarin cok sallamak zorunda olmadigi ama bilse iyi olur diye dusundugum bonus;

* Yapacagin tasarim IE6 gibi cag disi bir browser icin de uygulanacaksa tasarimci olarak transparan zeminli bir eleman ustune yine zemini transparan baska bir eleman getirmemeye ozen gostermelisin. Diger turlu o tasarimi duzgun oturtmak cok mumkun olmuyor.

[reyou]

good artists copy great artists steal

[olitere]

saol di ama bu konuda ayrıntılı bir site falan iyi olurdu , işte kodlamayı falan öğreten

[Fly]

html/css diyorsan burası fena değil başlamak için

[di]

Tasarim ve kodlama dedigin kisimlar apayri dunyalar. O yuzden sirayla gitmende fayda var. Once birinden basla, sonra digerine gec.

Kodlama dedigin de kendi icinde bir ton parcaya ayrilacak. Zor degil ancak hepsini kendin yapacaksan cok fazla alana parcalanmak gerekiyor. Bu yuzden yorucu ve zahmetli olmasinin yaninda verimsiz. O yuzden ozellikle profesyonel bir is hayati icin dusunuyorsan birini secip, onun ustunde uzmanlasmak en iyisi.

Yok illa dokuman diyorsan google'dan arayip, anlatimi hosuna giden, sana hitap eden birseyler bulacaksin. Diger turlusu genelde yalan oluyor.

[olitere]

saol fly verdiğin site güzelmiş, haklısın di başlıyorum gugılın anasını bellemeye

[Pickles]

di çok fazla parçalanıyorsun o yüzden bir alanda uzmanlaşman daha iyi demişsin. mesela neyi bir alan olarak alıp orda uzmanlaşmak lazım örneklermisin rica etsem bana da lazım böyle bir şey

[Bone]

grafik, dizayn, tasarım farklı dünyalar
programcılık, kodlama, site geliştirmek farklı dünyalar.

üsttekini yapabilmek için dünyadaki renklerin, şekillerin, kıvrımların farkında olmalı, bunların insanlar üzerindeki etkilerini bilmen gerekiyor.
bunlar için özel siteler veya okul bölümleri var. onlarla uğraşarak kendini geliştirmen mümkün. resim veya fotoğraf gibi hobilerin olursa, dizayn yönünü geliştirmen kolaylaşır.
ayrıca css, flash, photoshop, freehand gibi programlarda uzmanlaşman gerekiyor.

örneğin şöyle posterler yapabilmelisin:

http://img833.imageshack.us/img833/5788/goodshapedesign.jpg

http://img695.imageshack.us/img695/5296/playcollectiveposterdes.jpg

bunları herhangi bir tutoriala veya başka bir örneğe bakarak kopyalamadan yapman gerekiyor. tamamen aklında tasarlayıp baştan bir şeyler üretebilmelisin.
sonra çıkardığın bu tasarımı bir siteye uyarlayabilmelisin.

örnek siteler olarak:

http://www.burgerstory.com/

http://www.fatihtanriverdi.com/

http://radiantplumbing.com/solar

ikincisi yani programcılık yönü daha farklı alanlara götürüyor seni. php, asp, javascript, java, sql gibi şeylerle uğraşıyorsun. sitenin tasarımıyla değil de altyapısıyla uğraşıyorsun. kafandakini oluşturmak yerine olması gerekeni inşaa ediyorsun.

iki işi birden de yapabilirsin ama iyi sonuçlar çıkmaz. tek bir alanda yoğunlaşıp ona göre kendini geliştirmen daha çok güzel şeyler çıkarmanı sağlar.

olitere said:

yararlı dökümanlar bulunduran site linkleri veya makaleler paylaşırsanız minnettar olurum

yukardaki sticky topicte yazmıştım zaten bir sürü site, ama göremediysen buraya alıntılayım, çok işine yarar onlar:

topic: http://forum.paticik.com/read.php?5,4368700

Bone said:

Eğitim/Tutorial:
http://www.ehow.com/
http://www.wikihow.com/
http://www.tutorialized.com/
http://tutsplus.com/
http://www.tutorialsgarden.com/
http://www.pixel2life.com/
http://digital-photography-school.com/
http://www.wpdfd.com/
http://www.googletutor.com/
http://www.mccannas.com/pshop/menu.htm
http://www.cambridgeincolour.com/tutorials.htm
http://www.drawspace.com/
http://www.drawingcoach.com/
http://www.howcast.com/
http://www.videojug.com/
http://www.wonderhowto.com/
http://www.sutree.com/
http://www.gotoandlearn.com/

Sanat/Tasarım:
http://www.deviantart.com/
http://www.gfxartist.com/
http://www.conceptart.org/
http://www.fotocommunity.com/
http://www.dpchallenge.com/
http://www.photosig.com
http://www.elfwood.com/
http://digitalart.org/
http://www.biteycastle.com/
http://www.sonsofthestorm.com/
http://www.kennethparker.com/oldsite/
http://www.antilimit.com/
http://www.jasonchanart.com/index.html
http://www.nuribilgeceylan.com/
http://artpad.art.com/artpad/painter/
http://www.mrwong.de/myhouse/
http://www.pixeldam.net/
http://photoshopcontest.com/
http://www.pxleyes.com/
http://photoshopcandy.com/
http://www.cheapshooter.com/
http://www.robgalbraith.com/
http://www.pixeladdiction.com/
http://www.smashingmagazine.com/
http://justcreativedesign.com/
http://www.gomediazine.com/
http://cityofskies.com/
http://speckyboy.com/
http://creativebits.org/
http://vectips.com/
http://www.blog.spoongraphics.co.uk/
http://www.vectordiary.com/
http://learnai.com/
http://abduzeedo.com/
http://www.everydayflash.com/
http://www.drawergeeks.com/
http://www.panoramas.dk/
http://www.avivadirectory.com/color/

[Osso]

[www.fatihtanriverdi.com] şu sitede bug var gibi mouse3 e tıklayıp aşşa yukarı gidince sonsuza ulaşıyorsunuz.

[Bone]

bende öyle bişi olmadı da, "bugsız site" örneği olarak koymamıştım zaten onu ^^

[di]

Pickles said:

di çok fazla parçalanıyorsun o yüzden bir alanda uzmanlaşman daha iyi demişsin. mesela neyi bir alan olarak alıp orda uzmanlaşmak lazım örneklermisin rica etsem bana da lazım böyle bir şey

Dinamik bir sitenin herseyini benim yapmam gerektigi bir durumda sunlarla ugrasmak durumunda kaliyorum;

* Sitenin tasarimi.
* Tasarimin HTML ve CSS olarak parcalanmasi.
* Sitenin icerigine uygun veritabaninin tasarlanmasi.
* PHP gibi bir dil ve SQL gibi bir veritabani dili ile bir nevi CMS ve yonetim paneli hazirlanarak daha onceden hazirlanan HTML ve CSS ile entegre edilmesi.
* Gerekiyorsa yonetim paneli icin ayri bir tasarim yapilacak onun da yukaridaki islemlerden gecmesi.

Yukardaki listeden tasarim kismi benim icin zor olan kisimlardan biri. Zira tasarim araclarini gayet iyi seviyede kullanabilmeme ragmen bu konudaki yaraticiligim az ve yeterli deneyimle beslenmis degil (evet sadece yaraticilik ise yaramiyor bu konuda da).

HTML ve CSS kismi en kolay ve zevkli kisimlardan biri ama piyasadaki browser sayisinin fazla olmasi ve IE6 belasi yuzunden oldukca iskenceye donusmus bir is. Ustelik zamaninda micros~1 gibi dingil sirketler kendi standartlarini ittirmeye kalktigindan bu standartlar yanlis bilindi, yanlis ogretildi. Parcaladigim tasarimlar firefox'ta neden calismiyor kafayi yedigim zamanlar sadece 2-3 sene oncesindeydi. Bir de olmazsa olmaz javascript kismi var bu isin tabi. Onu da en azindan temelinde bilmeniz ve sonrasinda bir JS framework kullanarak pekistirmeniz sart.

Veritabani tasarimi bana gore zevkli bir is ama yine bilinmesi gereken seyler, uyulmasi gereken kurallar var. Sistem yoneticiligi yaptigim donemde sunuculari performans en cok etkileyen sebeplerden biri sacmasapan veritabani tasarimlariydi. Hem kisilerin siteleri adam akilli acilmiyordu, hem de adamlarin derdini cozmeye kalktigimizda isin icinden cikamiyorduk.

PHP ve SQL kismindan ne demek istedigimi zaten biliyorsunuz, bir web dili ve SQL gibi yarattiginiz veritabanini, veritabani sunucusu ustunden sorgulayacaginiz bir dil bilmeniz gerekiyor. Genelde cok basit seyler ihtiyacinizi karsilasa da projeniz buyudukce ve gelen ziyaretci sayisi arttikca yaptiklarinizi bir adim oteye goturmeniz gerekiyor ve bu da artik ileri seviye dedigimiz alana giriyor. Bir yerden sonra bakmissiniz ki deign pattern'lar, performance tip'ler derken kafayi yemissiniz.

Sahsim adina su anda tasarim harici kisimlarda pek iyiyim diyebilirim lakin bilgimi taze tutmak her gecen gun zorlasiyor cunku hem hepsini surekli kullanmadigim icin unutuyorum, hem de teknolojiler yavasca da olsa degisiyor. Bu birikimle HTML5 ve CSS3 benim icin bile hatiri sayilir bir degisim olacak zamani geldiginde.

Durum ve hal bu sekilde oldugundan ben tasarim sevdasini uzun sure once biraktim. Mumkunse HTML ve CSS kismina bile elimi surmuyorum cunku ben tasarimi 1 haftada yapiyorsam, isin ehli arkadasim 3 saatte yapiyor. Ne eksik ne fazla soyledim sureleri. HTML ve CSS'de IE6 yuzunden vaktimi aliyor. Mumkunse ugrasmiyorum, sadece back-end developmen'i ile ilgileniyorum huzur buluyorum. Bu soyledigimin tam tersi de tasarimcilar ve front-end developer'lar icin gecerli. Onlar da back-end'e bulasmaktan sikayetci.

Haliyle web development kismi fazlasiyla dallanip budaklanmis bir is ve her yerine yetismek hem mumkun degil hem de yanlis bir yaklasim.

[Pickles]

peki tasarım ve front-end e php mysql gibi server side diller giriyor mu yoksa tasarım, html, css, javascript vb. client sidela sınırlı mı kalıyor

[di]

Front-end dedigimiz kisim html,css,js kismi. Tasarimi parcalama kismini da buraya koyuyoruz ama tasarim deigimiz seyi genelde front-end developer degil, tasarimci yapiyor.

Back-end kismi da veritabani ve PHP kismini yazan kisi oluyor benim ornegimde.

Yakin zamanda Turkiye'de gormemiz mumkun olmasa da olmasi gereken sistem su;

Designer
Front-end developer
Database designer
Back-end developer
System administrator.

Back-end kodlari ile front-end kolari birlestiren kisi genelde bu iki ekipten/kisiden biri oluyor ama artik middle-end diyebilecegimiz bir pozisyon da yavas yavas olusuyor sanki. Bu middle-end tayfasi da php, html, css ve template engine'ler hakkinda bilgi sahibi oluyor.

[toggie]

front-end = html + css + js

[Bone]

Pickles said:

peki tasarım ve front-end e php mysql gibi server side diller giriyor mu yoksa tasarım, html, css, javascript vb. client sidela sınırlı mı kalıyor

e yukarda yazdım ya:

Bone said:

grafik, dizayn, tasarım farklı dünyalar
programcılık, kodlama, site geliştirmek farklı dünyalar.

üsttekini yapabilmek için
css, flash, photoshop, freehand gibi programlar

ikincisi yani programcılık yönü
php, asp, javascript, java, sql

tasarımcıysan kağıt üzerinde hazırladığım taslağı siteye uyarlıyorsun.
bunun için javascript bile gerekmiyor. php/sql dolayısıyla database'le ne işin olcak onu anlamadım.

tasarlıyorsun, dizayn ediyorsun,
yani şekli yaratıp renkleri seçiyorsun, hangi menünün nerede olduğunu ayarlıyorsun.
yukarda örnek site de verdim ama bakmadın herhalde.

[di]

E bonec yarim yamalak yazmissin anlamamis iste adam. Kaldi ki yaptigin ayrimlar da cok net degil. Flash'da ikiye ayrildi. Flash'in tasarim kismi tasarimcinin elinde artik, actionscript kismini ise bu iste uzmanlasmis programcilar hallediyor. Front-end developer'a sikistiramazsin yani direkt flash olaraktan.

[Pickles]

back-end front-end diye ayırmamışın ama :D. İkisi arasında seçim yapmakta zor iş ya. Über tasarımlı siteleri görüp olum sen boşver php asp falan otur tasarım ve html kısmına yönel diyorum , bazen de css delirttiğinde ya geç kral kral yaz kodunu uğraşma bıdı bıdı stillerle. Acemiliğime geçen ie6 ya uygun yapmamışım siteyi, hiç te aklıma gelmedi ha dedim anca az bişey kayıklıklar vardır falan uğraşmiyim portable ie6 çekmeye falan. Sonra virtual xp ile bi baktım anam herşey karman çorman. ie en azından insaflı davranım if IE6 diye bir şeyi kabul ediyo yani :D

[Bone]

yok ben yazdım da okumamış ondandır.

ayrıca front-end'e felan sıkıştırmadım, flash'a actionscript dahil etmedim dikkat edersen :)

[di]

Pardon. Haklisin. CSS'i tasarima sikistirinca ters yorumladim ben =)

[Fistan]

olitere said:

Sevgili patiler bu konuda insanlara avuç açmaktan sıkılmış bulunmaktayım.Photoshop ve web tasarım konusunda sıfırdan başlıyan bir insan için yararlı dökümanlar bulunduran site linkleri veya makaleler paylaşırsanız minnettar olurum

ver 50 tl bilen arkadaşın yapsın
yorma kendini

[toggie]

isin tasarım kısmı icin egitim sart ama. oyle olmuyo yaratıcılık kendiliginden gelmiyo ya. web isine sardıgımdan beri hep orneklere baktım hala da butun gunumu inspiration sitelerinde harcıyorum. kendi sitemi 4 kez dizayn ettim ve kodladım. simdi 5. uzerinde calısıyorum ve hala memnun degilim.

[di]

O isin apayri bi boyutu. Kendini degil, musteriyi memnun edeceksin. Kendi siteni istedigin gibi yapamama olayi iyi ve kotuyu asip bambaska bi boyuta geciyor.

[Oce4n]

çizebildiğim en iyi cin ali bu mesela bende...
http://imgur.com/2ZlIW.png
fotoşop eğitimi bilmemne alsam neyime yarayacak ki yetenek olmadıktan sonra.

[Bone]

Pickles said:

back-end front-end diye ayırmamışın ama :D.
İkisi arasında seçim yapmakta zor iş ya.
Über tasarımlı siteleri görüp olum sen boşver php asp falan otur tasarım ve html kısmına yönel diyorum , bazen de css delirttiğinde ya geç kral kral yaz kodunu uğraşma bıdı bıdı stillerle.

back-end front-end diye ayırmadım çünkü sitenin programlama işine giriyor onlar.
dizayndan bahsediyorsan back-end front-end diye ayrım olmuyor.
sitenin dinamik olarak çalışmasını veya databasele iletişimi programcılar hallediyor.

html mi daha iyi, php mi daha iyi gibi bir yazı da yazmak istemedim.

benim yazdığım konular "acaba dizayna mı yönelsem, programcılığa mı" konusunda açıklama olsun diye idi, ama aynı şeyleri tekrar yazmam gerekiyorsa, buyur:

sitenin dizaynını, tasarımını yapacak kişi, "sanat" konusunda bilgili bir kişi olması lazım. eğer tabii "güzel" bir tasarımdan bahsediyorsak, yoksa sıradan şeyleri programcılar da halledebiliyor, html+css şak hazır.

eğer bir kişi tasarım yönünde gidecekse, kendisini farklı sanat alanlarına yönlendirmesi ve bu konuda beslemesi gerekiyor. yani açık fikirli olup bol bol incelemeli.
site dizaynı sanatı, fotoğrafçılık, resim, heykelcilik, müzik gibi konuların tekniklerinden örnekler tasıyor. bu alanlarda teknik bilgi öğrendikçe, site dizaynlarına da uygulayabiliyorsun.

bir tasarımcı nasıl olmalı? programcıdan farklı olacak elbette. renkleri görebilmeli ve bu renklerin ne anlama geldiğini düşünebilmeli. bir kırmızı renge baktığında pembe renkten ayırt edebilmeli, iki rengin insan gözünde ne anlama geldiğini bilmeli.
şekilleri inceleyebilmeli, hazırlayacakları taslaklarda veya uygulayacağı sitede şekillerden nasıl faydalanabileceğini hesaplayabilmeli.
dünyaya farklı bir gözle bakabilmeli.
öncelikle hayalinde farklı şeyler düşünebilmeli, günlük hayatta gördüğümüz standart ve klişe kalıplardan farklı olarak bunları eğip bükebilmeli.
aklındaki bu fikri en iyi nasıl sunabileceğini kestirebilmeli, bunları pratiğe dökebilmeki.

yani böyle bir adamın hayatı renkler, şekiller, fontlar, sesler, görseller oluyor.

eğer böyle şeylerden hoşlanıyorsan dizayn alanına yönel. bunun için 3dsmax, freehand, css, flash, photoshop gibi programları kullanıp grafik hazırlaman gerekebiliyor.

programlama işinde ise, bu işin farklı bölümleri var. asp/php'si var, database için sql dilleri var, actionscript/javascript gibi scripting dilleri var... her birinin alanı farklı, yaptıkları işler farklı. ancak programcıların uğraşma biçimleri birbirine çok benzer.
programcılıkta ne yapacağın önceden belli. yani şöyle şöyle bir şeyler yapacaksın, müdür veya takım arkadaşların sana bazı hizmetler verecek, sen bunları yerine getirmeye çalışacaksın. yani kafanda bir şeyler oluşturmak yerine, zaten belli olan şeyleri inşaa etmeye çalışacaksın.
örneğin database'deki bilgiyi alıp çevirip bunu kullanıcıya anlayacağı biçimde sunacaksın. bunu yaparken bulmaca çözüyormuş gibi bir takım işlemlerle uğraşacaksın.
önce bu işi kodlara nasıl dökeceğini düşüneceksin. oturup teker teker yazacaksın. belki eski kodlarla çakışma olacak bunları düzelteceksin. buglar çıkabilir bunun için defalarca test etmen gerekiyor.
bu işlemler matematiksel düşünmeyi seviyorsan zevkli. dediğim gibi bulmaca çözüyormuş gibi hissediyorsun. onu ordan al, buraya koy, diğerini getir üstüne yerleştir, alttan bir öğe çıkar çöpe at, komşuyla iletişimini kur, ortaya bir çukur aç, çukurun kenarından dışarıya doğru tünel kaz, tünel boyunca yeni öğeler ekle, sağdan soldan dengeleyecek destekler koy...
bu böyle gidiyor.

eğer kodlamaktan ve hedefine ulaşmak için çalışmaktan keyif duyuyorsan, programlama kısmı daha çok zevk verecektir.

öncelikle ne tip bir şey yapacağına karar ver. hem dizayn hem programlama gitmen gerekmiyor. günlük hayatta ne tip şeylerden daha çok haz aldığını düşün, ona göre hareket et.