{"id":978,"date":"2010-06-29T08:39:08","date_gmt":"2010-06-29T08:39:08","guid":{"rendered":"http:\/\/www.erbugkaya.com\/?p=978"},"modified":"2014-01-16T23:05:27","modified_gmt":"2014-01-16T23:05:27","slug":"expression-web-3-ve-psd-adobe-photoshop-dosyasi-import","status":"publish","type":"post","link":"http:\/\/erbugkaya.com\/?p=978","title":{"rendered":"Expression Web 3 ve .PSD (Adobe Photoshop Dosyas\u0131) Import"},"content":{"rendered":"<p><em>20.04.2010<\/em><br \/>\nMerhaba bu makalemizde Expression Web 3 ile gelen bir di\u011fer yeni \u00f6zelli\u011fi, Expression Web&#8217;e (EW) Adobe Photoshop (PS) .PSD dosyas\u0131 import etmeyi inceleyece\u011fiz.<\/p>\n<p><!--more--><br \/>\nD\u00fcnyan\u0131n b\u00fcy\u00fck bir h\u0131zla ortak platformlar konusunda \u00e7al\u0131\u015fmaya ba\u015flad\u0131\u011f\u0131 bir ortamda Microsoft&#8217;un da elbette \u00e7al\u0131\u015fmalar\u0131 olmaktad\u0131r. Bu kapsamda Expression Studio 3 ile gelen Adobe \u00fcr\u00fcnleriyle uyumluluk \u00e7al\u0131\u015fmas\u0131 bir tasar\u0131mc\u0131 olarak beni en mutlu eden geli\u015fmelerden biri oldu. Expression Web&#8217;i ve Photoshop&#8217;u nerdeyse her g\u00fcn kullanan biri olarak bu yeni \u00f6zelli\u011fin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 size anlatmaya ba\u015flayay\u0131m.<\/p>\n<p>Elbette her zaman yapt\u0131\u011f\u0131m gibi bu makale i\u00e7in de \u00f6rnek olarak alttaki gibi bir tasar\u0131m haz\u0131rlad\u0131m. Ama bu tasar\u0131m\u0131n benim i\u00e7in \u00e7ok b\u00fcy\u00fck bir \u00f6nemi var. Takip edenler fark etmi\u015ftir. Bug\u00fcne kadarki makalelerimde kulland\u0131\u011f\u0131m tasar\u0131mlar genellikle fantastik \u00f6\u011felerden ya da fantastik roman tan\u0131t\u0131m uygulamalar\u0131ndan olu\u015fuyordu. Alttaki site \u00f6rne\u011fi de yine bir fantastik romanlar sitesi tasar\u0131m\u0131 fakat bu sefer tasar\u0131mda yazm\u0131\u015f oldu\u011fum fantastik roman\u0131m Giddar&#8217;\u0131 da kulland\u0131m. Giddar&#8217;\u0131n Silverlight ile haz\u0131rlanm\u0131\u015f sitesine <a href=\"http:\/\/www.giddar.com\/\" target=\"_blank\">buradan ula\u015fabilirsiniz. <\/a> <em>Alttaki di\u011fer kitaplar iyi bir dilekten ba\u015fka bir \u015fey de\u011fildir.:)<\/em><\/p>\n<p>Devam edelim. Bir site i\u00e7in alttaki gibi bir tasar\u0131m haz\u0131rlad\u0131n\u0131z ve m\u00fc\u015fteri bu tasar\u0131m\u0131 onaylad\u0131. Yaz\u0131l\u0131m\u0131 haz\u0131rlanmadan \u00f6nce art\u0131k tasar\u0131m\u0131 par\u00e7alay\u0131p b\u00f6lme zaman\u0131d\u0131r. Klasik yolla bu i\u015fe giri\u015fti\u011finizde hepiniz \u00e7ok iyi bilirsiniz ki bir \u00e7ok Slice, crop, save for web i\u015flemi sizi beklemektedir. Ama art\u0131k i\u015fler de\u011fi\u015fmeye ba\u015flad\u0131. EW&#8217;ye bir site tan\u0131mlayarak i\u015fe ba\u015flayal\u0131m. Bu i\u015flemin nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 bilmiyorsan\u0131z, <a href=\"http:\/\/www.yazgelistir.com\/Makaleler\/1000001319.ygpx\" target=\"_blank\"> \u015fu makalemi inceleyebilirsiniz.<\/a><\/p>\n<p><a href=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_01.jpg\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_01.jpg\" width=\"480\" height=\"480\" \/><\/a><\/p>\n<p>Site tan\u0131mlad\u0131\u011f\u0131na g\u00f6re art\u0131k tasar\u0131m objelerini (imajlar) projeye alma vaktidir. Ama bu sefer PS&#8217;de crop, save for web&#8217;ler yerine makalemizin konusu olan yeni \u00f6zelli\u011fi kullan\u0131yoruz.<\/p>\n<p><strong>File&gt;Import&gt;Adobe Photoshop(.psd)..<\/strong>.&#8217;yi se\u00e7iyoruz.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_02.jpg\" width=\"403\" height=\"417\" \/><\/p>\n<p>Haz\u0131rlam\u0131\u015f oldu\u011fumuz .PSD dosyas\u0131n\u0131 se\u00e7ip &#8220;Open&#8221; a bas\u0131yoruz.<\/p>\n<p><a href=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_03.jpg\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_03.jpg\" width=\"360\" height=\"284\" \/><\/a><\/p>\n<p>PSD import penceresi ilk a\u00e7\u0131ld\u0131\u011f\u0131nda ben g\u00f6zlerime inanamad\u0131m. \u015eu anda Expression Web, t\u00fcm layerlar\u0131, gruplar\u0131yla bir Photoshop dosyas\u0131na bak\u0131yor. Enfes!!!<\/p>\n<p><a href=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_04.jpg\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_04.jpg\" width=\"480\" height=\"329\" \/><\/a><\/p>\n<p>\u0130stedi\u011fimiz layer&#8217;\u0131 a\u00e7\u0131p kapayabiliyoruz. Ve bu s\u0131rada sol taraf e\u015f zamanl\u0131 olarak g\u00fcncelleniyor.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_05.jpg\" width=\"467\" height=\"340\" \/><\/p>\n<p>\u0130stedi\u011fimiz layer&#8217;\u0131n \u00fcst\u00fcne mouse&#8217;u getirince o layerda ne oldu\u011funu g\u00f6steren bir popup a\u00e7\u0131l\u0131yor. \ud83d\ude42<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_06.jpg\" width=\"429\" height=\"354\" \/><\/p>\n<p>Bu dosyadan export edebilece\u011fimiz dosya t\u00fcrleri alttad\u0131r. PNG, JPEG ve GIF olarak \u00e7\u0131kt\u0131 alabiliyoruz.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_07.jpg\" width=\"154\" height=\"88\" \/><\/p>\n<p>BBunu yaparken gerekli ayarlar varsa onu kullanabiliyoruz. \u00d6rne\u011fin JPEG se\u00e7ene\u011fi i\u00e7in kalite ayar\u0131 yapabiliyoruz. Ayr\u0131ca export edece\u011finiz imaj\u0131n boyutunuda buradan \u00f6\u011frenebiliyorsunuz.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_08.jpg\" width=\"272\" height=\"83\" \/><\/p>\n<p>Layerlar\u0131 kapayarak sadece scroll arka plan\u0131n\u0131n kalmas\u0131n\u0131 sa\u011flad\u0131m ve bunu transparan PNG olarak export edece\u011fim. br \/&gt;<br \/>\n<a href=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_09.jpg\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_09.jpg\" width=\"479\" height=\"331\" \/><\/a><\/p>\n<p>OK &#8216;e bas\u0131nca dosyay\u0131 nereye kaydetmek istedi\u011fimi soran ekran geldi. \u0130maj\u0131n ad\u0131n\u0131 de\u011fi\u015ftirip projenin &#8220;images&#8221; klas\u00f6r\u00fcne kaydediyorum.<\/p>\n<p><a href=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_10.jpg\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_10.jpg\" width=\"370\" height=\"64\" \/><\/a><\/p>\n<p>\u0130\u015fte biraz \u00f6nce export etti\u011fim transparan PNG&#8217;nin IE&#8217;de kullan\u0131lm\u0131\u015f hali. \u00c7ok ba\u015far\u0131l\u0131.<\/p>\n<p><a href=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_11.jpg\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_11.jpg\" width=\"480\" height=\"502\" \/><\/a><\/p>\n<p>\u0130\u015flemlere devam etmek i\u00e7in PSD&#8217;yi tekrar import etti\u011finizde sizi \u015fa\u015f\u0131rt\u0131c\u0131 bir \u015fey bekliyor olacak. Dosya b\u0131rakt\u0131\u011f\u0131n\u0131z en son import haliyle a\u00e7\u0131l\u0131r.<\/p>\n<p><a href=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_12.jpg\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_12.jpg\" width=\"480\" height=\"331\" \/><\/a><\/p>\n<p>Tekrar edecek olan backgroundlar gibi \u00f6zel i\u015flem isteyen imajlar d\u0131\u015f\u0131nda i\u015finizin ne kadar kolayla\u015ft\u0131\u011f\u0131n\u0131n fark\u0131ndas\u0131n\u0131z umar\u0131m. Bu \u015fekilde istedi\u011finiz t\u00fcm imajlar\u0131 projeniz i\u00e7in haz\u0131r hala getirebilirsiniz.<\/p>\n<p>AMA!!!<\/p>\n<p>Elbette bu kocaman aman\u0131n bir anlam\u0131 var. EW 3 ile ilk kez gelen PSD import i\u015fleminin hen\u00fcz t\u00fcm PS \u00f6zelliklerini desteklemedi\u011fini s\u00f6ylemeliyim. Bunun ilerideki EW versiyonlar\u0131nda tamamen d\u00fczeltilece\u011fini d\u00fc\u015f\u00fcn\u00fcyorum. Neyin desteklendi\u011fini neyin desteklenmedi\u011fini dert etmenize gerek yok. \u00c7\u00fcnk\u00fc EW layerlar\u0131n yan\u0131ndaki &#8220;i&#8221; ikonu ile size bu konuda yard\u0131mc\u0131 olacak.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_13.jpg\" width=\"323\" height=\"58\" \/><\/p>\n<p>Hatta bununla da kalmay\u0131p ikonun \u00fczerine gelirseniz size oradaki hatay\u0131 bildiyor. Altta iki tane \u00f6rnek hata verdim.<\/p>\n<p><a href=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_14.jpg\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_14.jpg\" width=\"380\" height=\"73\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_15.jpg\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002447_15.jpg\" width=\"383\" height=\"61\" \/><\/a><\/p>\n<p>Elbette bu konuda tamamen \u00e7aresiz de\u011filsiniz. Bir ba\u015fka makalede bir Photoshop PSD dosyas\u0131n\u0131n Expression Web 3 import i\u015flemi i\u00e7in nas\u0131l i\u015flemlerle haz\u0131rlanaca\u011f\u0131n\u0131 anlat\u0131p desteklenmeyen \u00f6zelliklerin tam bir listesini verece\u011fim.<\/p>\n<p>Bu makalede Expression Web 3 ile bir Photoshop PSD dosyas\u0131n\u0131 projemize import etme \u00f6zelli\u011fini inceledik.<\/p>\n<p>\u0130yi \u00e7al\u0131\u015fmalar<\/p>\n<p>Te\u015fekk\u00fcrler.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>20.04.2010 Merhaba bu makalemizde Expression Web 3 ile gelen bir di\u011fer yeni \u00f6zelli\u011fi, Expression Web&#8217;e (EW) Adobe Photoshop (PS) .PSD dosyas\u0131 import etmeyi 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":[29,53],"class_list":["post-978","post","type-post","status-publish","format-standard","hentry","category-teknik-yazi","tag-expression-web","tag-photoshop"],"_links":{"self":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/978","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=978"}],"version-history":[{"count":3,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/978\/revisions"}],"predecessor-version":[{"id":2396,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/978\/revisions\/2396"}],"wp:attachment":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=978"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}