{"id":610,"date":"2010-06-26T22:11:21","date_gmt":"2010-06-26T22:11:21","guid":{"rendered":"http:\/\/www.erbugkaya.com\/?p=610"},"modified":"2014-01-16T23:42:06","modified_gmt":"2014-01-16T23:42:06","slug":"expression-design-calisma-alani","status":"publish","type":"post","link":"http:\/\/erbugkaya.com\/?p=610","title":{"rendered":"Expression Design – \u00c7al\u0131\u015fma Alan\u0131"},"content":{"rendered":"

11\/2\/2008<\/em>
\nMerhaba. Yaz\u0131lar\u0131m\u0131za Expression Design ile kald\u0131\u011f\u0131m\u0131z yerden devam ediyoruz. Bu seride ad\u0131m ad\u0131m Expression Design’\u0131(ED) inceleyece\u011fiz. Bu makalede ED’nin \u00e7al\u0131\u015fma alan\u0131n\u0131 inceleyece\u011fiz.<\/p>\n


\nDaha \u00f6nce y\u00fcklemi\u015f oldu\u011fumuz ED’nin SP1 updateni buradan<\/a> indirmenizi ve y\u00fcklemenizi tavsiye ederim.<\/p>\n

Anlatmaya ba\u015flamadan \u00f6nce Expression Design’\u0131 web tasar\u0131mc\u0131lar\u0131 olarak, neden \u00f6\u011frendi\u011fimizi s\u00f6yleyeyim. Her \u015feyden \u00f6nce merak. Ard\u0131ndan yenilikleri takip etme.Ve en \u00f6nemli sebep giderek kendine piyasada yer edinen, “flash killer” olarak isimlendirilen Silverlight. Bu sava\u015f\u0131 zaman g\u00f6sterecek ama kendi skillerinize bir yenisini eklemek ve silverlight’la proje geli\u015ftiriyoruz, tasar\u0131ma ihtiyac\u0131m\u0131z var diyen developer tak\u0131m arkada\u015flar\u0131n\u0131za sorun yok hallederim demenin ilk ad\u0131m\u0131 Expression Design’dan ge\u00e7iyor. \ud83d\ude42 Ba\u015flayal\u0131m.<\/p>\n

Expression Design’\u0131 a\u00e7\u0131yoruz. Genel yerle\u015fim altaki gibidir.<\/p>\n

\"\"<\/a><\/p>\n

File>Open yaparak ED’yi y\u00fckledi\u011finizde gelen \u00f6rnek \u00e7al\u0131\u015fmalardan birini a\u00e7\u0131yoruz. (Tahminen \u015fu klas\u00f6r dizin alt\u0131ndad\u0131r C:\\Program Files\\Microsoft Expression\\Design 1.0\\Samples) Expression Design ile \u00fcretti\u011finiz dosyalar (.design) olarak kaydedilir.<\/p>\n

\"\"<\/p>\n

Dosya a\u00e7\u0131lm\u0131\u015ft\u0131r.\u00c7al\u0131\u015fman\u0131n etraf\u0131ndaki \u00e7er\u00e7eve Artboard olarak isimlendirilir ve \u00e7al\u0131\u015fmam\u0131z\u0131n g\u00f6r\u00fcnen alan\u0131n\u0131 i\u00e7erir. Artboard d\u0131\u015f\u0131ndaki alanlar \u00e7al\u0131\u015fmaya dahil de\u011fildir.<\/p>\n

\"\"<\/a><\/p>\n

Birden fazla dosya a\u00e7arsan\u0131z, bunlar men\u00fcn\u00fcn alt\u0131ndaki alanda dizilecektir.<\/p>\n

\"\"<\/a><\/p>\n

A\u00e7\u0131lan dosyalar aras\u0131nda, Properties’in yan\u0131nda oka bas\u0131nca a\u00e7\u0131lan men\u00fc ile de ula\u015fabilirsiniz.<\/p>\n

\"\"<\/p>\n

\u00c7al\u0131\u015fma alan\u0131n\u0131n \u00fcst\u00fcndeki ve solundaki cetveller (ruler) \u00e7al\u0131\u015f\u0131rken bize k\u0131lavuzluk yapacak ara\u00e7lardan biridir.<\/p>\n

\"\"<\/p>\n

Rulerlar\u0131n \u00f6l\u00e7\u00fc birimini Edit>Options>Units and Grids ile de\u011fi\u015ftirebilirsiniz. Document Units’de ben “pixels” i tercih ettim. Rulerlar\u0131n s\u0131f\u0131r noktas\u0131 sol \u00fcst k\u00f6\u015fedir. “Ruler origin is always top left of artboard” \u00e7ekini kald\u0131rarak bunu iptal edebilirsiniz.<\/p>\n

\"\"<\/a><\/p>\n

Tercih edebilece\u011finiz \u00f6l\u00e7\u00fc birimleri alttaki imajda g\u00f6r\u00fcnenlerdir.<\/p>\n

\"\"<\/p>\n

Mouse’u rulerlar\u0131n \u00fczerinde klikleyip \u00e7al\u0131\u015fma alan\u0131na s\u00fcr\u00fcklerseniz k\u0131lavuz \u00e7izgileri elde edersiniz.<\/p>\n

\"\"<\/a><\/p>\n

\u0130pucu : A\u00e7\u0131l\u0131 Ruler
\nED ile yatay ve d\u00fc\u015fey d\u0131\u015f\u0131nda da ruler olu\u015fturabilirsiniz. View>Rotate View Clockwise ile \u00e7al\u0131\u015fman\u0131n t\u00fcm\u00fcn\u00fc saat y\u00f6n\u00fcnde \u00e7evirebilirsiniz. Her \u00e7evirmede \u00e7al\u0131\u015fma 22.5 derece d\u00f6nmektedir. “Rotate View Counter Clockwise” ile saat y\u00f6n\u00fcn\u00fcn tersinde \u00e7al\u0131\u015fman\u0131z\u0131 \u00e7evirebilir, “Reset View Rotation” ile \u00e7evirdi\u011finiz \u00e7al\u0131\u015fmay\u0131 ilk haline getirebilirsiniz.Dikkat ederseniz ilk ba\u015fta belirledi\u011fimiz k\u0131lavuz \u00e7izgileride \u00e7al\u0131\u015fma ile birlikte d\u00f6n\u00fcyor<\/p>\n

\"\"<\/a><\/p>\n

Diyelim ki \u00e7al\u0131\u015fma s\u0131ras\u0131nda 45 derecelik bir k\u0131lavuz \u00e7izgisine ihtiyac\u0131n\u0131z oldu. \u0130lk \u00f6nce belirledi\u011finiz y\u00f6nde \u00e7al\u0131\u015fmay\u0131 iki kez d\u00f6nd\u00fcr\u00fcn.<\/p>\n

\"\"<\/a><\/p>\n

\u00c7al\u0131\u015fma bu halde iken yeni k\u0131lavuz \u00e7izgilerinizi s\u00fcr\u00fckleyin.<\/p>\n

\"\"<\/a><\/p>\n

\u015eimdi View>Reset View Rotation ile \u00e7al\u0131\u015fman\u0131z\u0131 ilk hale getirin. OK! A\u00e7\u0131l\u0131 k\u0131lavuzlar\u0131m\u0131zlar\u0131m\u0131z haz\u0131r. K\u0131lavuz \u00e7izgilerini Alt tu\u015funa bas\u0131l\u0131yken s\u00fcr\u00fckleyebilir, rulerlar\u0131n \u00fcst\u00fcne b\u0131rakarak silebilirsiniz.<\/p>\n

\"\"<\/a><\/p>\n

File>New ile yeni bir dok\u00fcman a\u00e7abilirsiniz.<\/p>\n

\"\"<\/p>\n

New Document penceresinin \u00f6zellikleri alttaki imajlarda g\u00f6r\u00fcnd\u00fc\u011f\u00fc gibidir.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Alttaki imajda g\u00f6sterilen ara\u00e7lar sayesinde \u00e7al\u0131\u015fman\u0131zda zoom yapabilirsiniz.<\/p>\n

\"\"<\/a><\/p>\n

Mouse tekerl\u011fide bir zoom arac\u0131d\u0131r. Fakat bunu de\u011fi\u015ftirebilirsiniz. Edit>Options>General da bulunan “Mouse wheel usage” se\u00e7ene\u011fi ile mousenuzun kullan\u0131m \u015fekline karar verebilirsiniz.<\/p>\n

\"\"<\/a><\/p>\n

Tool bardaki el ikonuna t\u0131klayarak \u00e7al\u0131\u015fman\u0131z\u0131 kayd\u0131rabilir, ayn\u0131 ikona \u00e7ift t\u0131klayarak \u00e7al\u0131\u015fman\u0131z\u0131 ger\u00e7ek boyunda g\u00f6rebilirsiniz. B\u00fcy\u00fcte\u00e7 ikonunu s\u00fcr\u00fckle b\u0131rak \u015feklinde kullan\u0131rsan\u0131z sadece istedi\u011finiz b\u00f6lgeye zoom yapm\u0131\u015f olursunuz. Ayn\u0131 \u015fekilde b\u00fcy\u00fcte\u00e7 ikonuna \u00e7ift t\u0131klamak \u00e7al\u0131\u015fman\u0131z\u0131n tam olarak ekran\u0131n\u0131za oturmas\u0131n\u0131 sa\u011flar. Alt ile b\u00fcy\u00fcteci kullanmak ise zoom out i\u015flemlerini ger\u00e7ekle\u015ftirir.<\/p>\n

\"\"<\/p>\n

Zoom i\u015flemlerini men\u00fcdeki View ile de y\u00f6netebilirsiniz.<\/p>\n

\"\"<\/p>\n

View>Show>Grid ile \u00e7al\u0131\u015fman\u0131z\u0131n gridlerini a\u00e7abilirsiniz.<\/p>\n

\"\"<\/a><\/p>\n

Edit>Options>Units and Grids ‘de Grid Size’\u0131 kullanarak gridlerinizin boyunu iste\u011finize g\u00f6re ayarlayabilirsiniz.<\/p>\n

\"\"<\/a><\/p>\n

View>Snap to Grid ile \u00e7izece\u011finiz objelerin gridlere kilitlenmesini sa\u011flayabilirsiniz.Objenizi \u00e7al\u0131\u015fma alan\u0131nda hareket ettirirken tam oturmay\u0131 ifade eden X i\u015faretleri olu\u015fur.
\nAyn\u0131 \u015fekilde objelerinizin rulerlara ve birbirilerinin pointlerine kilitlenmesinide sa\u011flayabilirsiniz.<\/p>\n

\"\"\"\"<\/p>\n

File>Document Size ile \u00e7al\u0131\u015fman\u0131n boyunu de\u011fi\u015ftirebilirsiniz.<\/p>\n

\"\"<\/p>\n

File>Artboard Size ile \u00e7al\u0131\u015fma alan\u0131n boyutunu de\u011fi\u015ftirebilirsiniz. Document Size t\u00fcm \u00e7al\u0131\u015fman\u0131n boyunu de\u011fi\u015ftirirken, Artboard, \u00e7al\u0131\u015fmay\u0131 koruyup \u00e7al\u0131\u015fma alan\u0131n\u0131n boyunu de\u011fi\u015ftirir.<\/p>\n

\"\"<\/p>\n

Expression Design toplam 4 panelden lou\u015fmaktad\u0131r. Bunlardan Action bar, Layers ve Properties panellerini Men\u00fcdeki Window’dan a\u00e7\u0131p kapayabilirsiniz.<\/p>\n

\"\"
\nTool bardaki itemler\u0131n sa\u011f alt k\u00f6\u015fesindeki oklar o item ald\u0131nda ba\u015fka itemler\u0131nda oldu\u011funu belirtmektedir. Klikleyip bas\u0131l\u0131 tutarak itemlara ait bu men\u00fcleri a\u00e7abilirsiniz.<\/p>\n

\"\"<\/p>\n

Sa\u011f taraftaki paneller kenarlar\u0131ndan tutularak b\u00fcy\u00fct\u00fcl\u00fcp k\u00fc\u00e7\u00fclt\u00fclebilir.<\/p>\n

\"\"<\/a><\/p>\n

\u00c7al\u0131\u015fma alan\u0131 Edit>Options>Workspace’deki Workspace zoom ile geni\u015fletilip k\u00fc\u00e7\u00fclt\u00fclebilir.<\/p>\n

\"\"<\/a><\/p>\n

Paneller sa\u011f \u00fcst k\u00f6\u015felerindeki “Float” ikonu ile bulunduklar\u0131 lokasyondan \u00f6zg\u00fcr hale getirilebilir, yine ayn\u0131 ikon ile yerlerine oturtulabilirler.<\/p>\n

\"\"\"\"<\/p>\n

View>Display Quality >Wireframe ile \u00e7al\u0131\u015fman\u0131n \u00e7izgisel halini g\u00f6rebilirsiniz. Bu ba\u015fkas\u0131na ait bir \u00e7al\u0131\u015fmay\u0131 incelerken neyi nas\u0131l yapt\u0131\u011f\u0131n\u0131 anlamada olduk\u00e7a yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n

\"\"<\/a><\/p>\n

View>Pixel Preview ile haz\u0131rlamakta oldu\u011funuz \u00e7al\u0131\u015fman\u0131n bitmap \u00f6n izlemelerini alabilirsiniz.<\/p>\n

\"\"<\/p>\n

Alttaki imajlardan soldaki vekt\u00f6rel \u00e7al\u0131\u015fma, sa\u011fdaki Quality 8, JPEG \u00e7\u0131k\u0131\u015f\u0131. Bitmap exportlar\u0131n\u0131z\u0131n nas\u0131l g\u00f6z\u00fckece\u011fini \u00f6nceden anlamak i\u00e7in iyi bir \u00f6zellik.<\/p>\n

\"\"<\/a>\"\"<\/p>\n

Bitmap preview’unda artboard’un d\u0131\u015f\u0131ndaki alan\u0131n g\u00f6r\u00fcnmez oldu\u011funa dikkat edin.
\n\"\"<\/a>
\nBu makalemizde temel seviyede Expression Design ‘\u0131n \u00e7al\u0131\u015fma alan\u0131n\u0131 inceledik. Ad\u0131ml\u0131 ger\u00e7ek bir proje \u00f6rne\u011fine gelene kadar bu \u015fekilde incelemelere devam edece\u011fiz.<\/p>\n

\u0130yi \u00e7al\u0131\u015fmalar<\/p>\n

Te\u015fekk\u00fcrler<\/p>\n","protected":false},"excerpt":{"rendered":"

11\/2\/2008 Merhaba. Yaz\u0131lar\u0131m\u0131za Expression Design ile kald\u0131\u011f\u0131m\u0131z yerden devam ediyoruz. Bu seride ad\u0131m ad\u0131m Expression Design’\u0131(ED) inceleyece\u011fiz. Bu makalede ED’nin \u00e7al\u0131\u015fma alan\u0131n\u0131 inceleyece\u011fiz.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[30],"class_list":["post-610","post","type-post","status-publish","format-standard","hentry","category-teknik-yazi","tag-expression-design"],"_links":{"self":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=610"}],"version-history":[{"count":4,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/610\/revisions"}],"predecessor-version":[{"id":2508,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/610\/revisions\/2508"}],"wp:attachment":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=610"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}