{"id":8087,"date":"2016-06-30T10:43:28","date_gmt":"2016-06-30T08:43:28","guid":{"rendered":"https:\/\/ihs.com.tr\/blog\/?p=8087"},"modified":"2019-01-22T10:32:58","modified_gmt":"2019-01-22T08:32:58","slug":"daha-iyi-web-sitesi-gorunumu-icin-retina-optimizasyonu","status":"publish","type":"post","link":"https:\/\/www.ihs.com.tr\/blog\/daha-iyi-web-sitesi-gorunumu-icin-retina-optimizasyonu\/","title":{"rendered":"Daha \u0130yi Web Sitesi G\u00f6r\u00fcn\u00fcm\u00fc \u0130\u00e7in Retina Optimizasyonu"},"content":{"rendered":"

Yeni web sitenizi<\/a> m\u00fckemmel yapmak i\u00e7in \u00e7ok fazla zaman harcad\u0131n\u0131z, ama sitenizi iPhone’unuzda g\u00f6r\u00fcnt\u00fcledi\u011finizde neden bu kadar bulan\u0131k g\u00f6r\u00fcn\u00fcyor? Siz muhakkak ki y\u00fcksek kaliteli g\u00f6r\u00fcnt\u00fcler kulland\u0131n\u0131z ama g\u00f6r\u00fcnt\u00fcler asla g\u00f6r\u00fcnmesi gerekti\u011fi gibi g\u00f6z\u00fckm\u00fcyor. Panik yapmay\u0131n!<\/span><\/p>\n

Bir\u00e7ok ki\u015fi resimlerin nas\u0131l g\u00f6r\u00fcnt\u00fclendi\u011fini etkileyen geli\u015fmi\u015f ekran teknolojisini kullanan daha yeni cihazlar\u0131n (\u00f6zellikle Apple’\u0131n cihazlar\u0131n\u0131n) fark\u0131nda de\u011fil. Neyse ki websitenizin cihaz\u0131n\u0131zda t\u0131pk\u0131 iPhone’da oldu\u011fu gibi harika g\u00f6z\u00fckmesini sa\u011flamak i\u00e7in g\u00f6r\u00fcnt\u00fcleriniz ile optimize edildi\u011finden emin olarak kullanabilece\u011finiz baz\u0131 p\u00fcf noktalar da var.<\/span><\/p>\n

Bu makalede, retina ekranlar konusunda bilgiler verecek ve retina ekranlar\u0131n web site g\u00f6r\u00fcnt\u00fclerinizi nas\u0131l etkileyece\u011fini a\u00e7\u0131klayacak. Sonra da retina ekranlarda g\u00f6r\u00fcnt\u00fclenecek g\u00f6r\u00fcnt\u00fclerin nas\u0131l tasarland\u0131\u011f\u0131n\u0131 sizelerle sunaca\u011f\u0131z.
\n<\/span><\/p>\n

Retina Ekran G\u00f6r\u00fcnt\u00fcleri A\u00e7\u0131klamas\u0131<\/strong><\/span><\/p>\n

Cihaz ekranlar\u0131 son birka\u00e7 y\u0131l i\u00e7erisinde kalitelerini y\u00fckseltmeye devam ettiler ve \u00f6zellikle Apple kendi ekranlar\u0131n\u0131 son derece net ve g\u00f6r\u00fclebilir hale getirmek i\u00e7in \u00e7ok \u00e7aba g\u00f6sterdi asl\u0131nda “Retina Ekran” Apple’\u0131n yeni cihazlar\u0131n\u0131n ekranlar\u0131n\u0131 tan\u0131mlamak \u00fczere kulland\u0131\u011f\u0131 bir marka<\/a> ad\u0131.<\/span><\/p>\n

Retina ekranlar \u00e7\u0131plak g\u00f6zle bak\u0131ld\u0131\u011f\u0131nda pixelleri g\u00f6r\u00fclmeyecek \u015fekilde, metin ve resimleri m\u00fcmk\u00fcn oldu\u011funca keskin bir \u015fekilde g\u00f6r\u00fcnt\u00fclemeyi ama\u00e7l\u0131yor. Tasar\u0131mc\u0131lar i\u00e7in zorlu olan k\u0131s\u0131m ise retina ekranlar\u0131n standart olmay\u0131\u015f\u0131d\u0131r. Yani cihaz\u0131n ekran boyutlar\u0131na ba\u011fl\u0131 olarak (\u00f6rne\u011fin bir saat ekran\u0131 ile bir tablet ekran\u0131) ve tipik bir kullan\u0131c\u0131 ekran\u0131 nas\u0131l olsun isterdi sorusuna ba\u011fl\u0131 olarak de\u011fi\u015fkenlik g\u00f6sterir.<\/span><\/p>\n

Retina ekranlar hakk\u0131nda konu\u015furken sabitlenmi\u015f bir alana s\u0131\u011fabilecek piksel say\u0131s\u0131n\u0131 ve piksel yo\u011funlu\u011funu d\u00fc\u015f\u00fcnmek zorunday\u0131z. Cihaz\u0131n t\u00fcm y\u00fcksekli\u011fi ve t\u00fcm geni\u015fli\u011fi boyunca piksel say\u0131s\u0131 ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc farkl\u0131d\u0131r. K\u00fc\u00e7\u00fck bir ekran (iPhone gibi) kendisi ile ayn\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011fe sahip daha b\u00fcy\u00fck bir ekrandan (iPad gibi) daha iyi bir piksel yo\u011funlu\u011funa sahip olacakt\u0131r. Yatay g\u00f6r\u00fcnt\u00fclenen piksel say\u0131s\u0131 ile ekran\u0131n fiziksel geni\u015fli\u011fini b\u00f6lmek bize her in\u00e7 ba\u015f\u0131na d\u00fc\u015fen pikseli verir. (ppi, ayn\u0131 zamanda dpi de denir ve in\u00e7 ba\u015f\u0131na nokta say\u0131s\u0131n\u0131 ifade eder) “Y\u00fcksek DPI” in\u00e7 ba\u015f\u0131na 200 pikselden fazla piksel d\u00fc\u015fen herhangi bir cihaza atfetmek i\u00e7in kullan\u0131l\u0131r. Buna Apple’\u0131n t\u00fcm retina ekran cihazlar\u0131 ve di\u011fer \u00fcreticilerin baz\u0131 cihazlar\u0131 da dahildir. Genelde web grafikleri 72dpi olarak optimize edilmi\u015ftir. Herhangi bir y\u00fcksek DPI cihaz\u0131nda (\u00f6zellikle retina ekran) g\u00f6r\u00fcnt\u00fclenen yo\u011funlukta bir g\u00f6r\u00fcnt\u00fcy\u00fc g\u00f6r\u00fcnt\u00fclemek i\u00e7in mevcut iki y\u00f6ntemden biri kullan\u0131l\u0131r:<\/span><\/p>\n

    \n
  1. Cihaz\u0131n DPI’sinde g\u00f6sterilirse boyutun bir fraksiyonu ile<\/span><\/li>\n
  2. Verilmi\u015f olan ekstra pikseller ile orijinal boyutlar\u0131 tahmin ederek (interpolasyon)<\/span><\/li>\n<\/ol>\n

    \"retina-sikistirma\"<\/p>\n

    Retina ekranlar i\u00e7in optimize edilmemi\u015f g\u00f6r\u00fcnt\u00fcler, t\u0131pk\u0131 sol g\u00f6rseldeki gibi pikselle\u015fmeyi g\u00f6sterecektir.<\/em><\/span><\/p>\n

    Bu, retina ekranl\u0131 cihazlarda en kaliteli g\u00f6r\u00fcnt\u00fc g\u00f6sterimini yakalamak i\u00e7in daha y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011fe sahip g\u00f6r\u00fcnt\u00fcler ile \u00e7al\u0131\u015fman\u0131z gerekti\u011fi anlam\u0131na geliyor. Bu da g\u00f6r\u00fcnt\u00fcleri yeni ekranlar i\u00e7in uygun olan piksel yo\u011funlu\u011funda g\u00f6r\u00fcnt\u00fcleyebilmenizi sa\u011flar. Bunu kendi Photoshopunuzda nas\u0131l yapabilece\u011finize bir g\u00f6z atal\u0131m!<\/span><\/p>\n

    Retina Ekran G\u00f6r\u00fcnt\u00fcs\u00fc Olu\u015fturmak \u0130\u00e7in Photoshop Nas\u0131l Kullan\u0131l\u0131r?<\/strong><\/span><\/p>\n

    \u00c7ift ya da d\u00f6rtl\u00fc \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011fe sahip g\u00f6r\u00fcnt\u00fclerle \u00e7al\u0131\u015fmak, herhangi bir ince ayr\u0131nt\u0131y\u0131 g\u00f6rebilmeniz i\u00e7in yak\u0131nla\u015ft\u0131rma yapmak zorunda kalabilece\u011finiz anlam\u0131na gelir, ama bunu yaparken son derece b\u00fcy\u00fck olan g\u00f6r\u00fcnt\u00fc dosyalar\u0131 size performans sorunlar\u0131 ve depolama zorluklar\u0131 ya\u015fatabilir.<\/span><\/p>\n

    Bu konuda en iyi tasar\u0131mc\u0131lar i\u00e7in \u00e7\u00f6z\u00fcm hep; \u00e7ok katmanl\u0131lar\u0131 ve gruplar\u0131 olu\u015fturup, Photoshop kompozisyonlar\u0131 \u00f6zelli\u011fini kullanarak onlar\u0131 gerekti\u011fi gibi a\u00e7\u0131k ya da kapal\u0131 konuma getirmek ya da orijinal \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte \u00e7al\u0131\u015f\u0131p, ihtiya\u00e7 duyduklar\u0131 boyutlar\u0131 d\u0131\u015far\u0131 \u00e7\u0131karmak olmu\u015ftur.<\/span><\/p>\n

    Ayn\u0131 anda birden fazla g\u00f6r\u00fcnt\u00fcy\u00fc g\u00f6remiyor olman\u0131z da bu y\u00f6ntemlerin ikisinin de olumsuz yan\u0131d\u0131r. E\u011fer ilgili boyutlardaki g\u00f6r\u00fcnt\u00fcler aras\u0131ndaki farklar\u0131 g\u00f6rmeniz gerekiyorsa, g\u00f6r\u00fcnt\u00fcleri kendi aralar\u0131nda de\u011fi\u015ftirmeniz ya da g\u00f6r\u00fcnt\u00fcleri d\u0131\u015far\u0131 aktarman\u0131z gerekiyor ve sonras\u0131nda da i\u015fleme tekrar ba\u015flamak zorundas\u0131n\u0131z.<\/span><\/p>\n

    Neyse ki biz Photoshop severler i\u00e7in Adobe \u00e7oklu g\u00f6r\u00fcnt\u00fc olu\u015fturma i\u015flemini yapabilen bir i\u015flevi b\u00fcnyesine ekledi ve \u00fcstelik daha kolay bir \u015fekilde \u00e7al\u0131\u015f\u0131yor. Art\u0131k siz de yandaki \u00e7al\u0131\u015fma y\u00fczeyi \u00f6zelli\u011fini kullanarak \u00e7oklu tuvaller olu\u015fturabilirsiniz ve olu\u015fturma sekmesini kullanarak \u00e7oklu g\u00f6r\u00fcnt\u00fc boyutlar\u0131 olu\u015fturabilirsiniz. \u015eimdi de retina ekranlar i\u00e7in g\u00f6r\u00fcnt\u00fc olu\u015fturma i\u015fleminin nas\u0131l y\u00fcr\u00fcd\u00fc\u011f\u00fcn\u00fc g\u00f6relim.<\/span><\/p>\n

    1-) \u0130lk Artboard\u0131n\u0131z\u0131 (\u00c7al\u0131\u015fma Y\u00fczeyi) Olu\u015fturun<\/strong><\/span><\/p>\n

    Photoshop CC 2015’te tan\u0131t\u0131lan yeni Artboard <\/em>arac\u0131, Move<\/em> arac\u0131n\u0131n arkas\u0131nda gizlenmi\u015f olarak bulunabilir. Men\u00fcden arac\u0131 direkt t\u0131klayabilir ya da Move<\/em> ve Artboard <\/em>aras\u0131nda ge\u00e7i\u015f yapmak i\u00e7in Shift+V<\/em> yapabilirsiniz.<\/span><\/p>\n

    \"Artboard-Photoshop\"<\/p>\n

    Bu artboard\u0131 olu\u015fturmak i\u00e7in, t\u0131klay\u0131n ve bir alana s\u00fcr\u00fckleyin. Yeni artboard, Artboard 1<\/em> \u015feklindeki varsay\u0131lan ad\u0131yla Layers<\/em> panelinde g\u00f6r\u00fcnt\u00fclenebilir.<\/span><\/p>\n

    2-) Artboard\u2019\u0131n\u0131z\u0131 Kurun.<\/strong><\/span><\/p>\n

    \u0130htiya\u00e7 duydu\u011funuz takdirde artboard\u0131n\u0131za herhangi bir layer\u0131 (katman) ekleyebilirsiniz ve birden fazla eklendi\u011fi takdirde bu layerlar, layer gruplar\u0131na benzer \u015fekilde i\u00e7 i\u00e7e olacakt\u0131r (uygun bir layer yap\u0131s\u0131n\u0131 olu\u015fturmak i\u00e7in olanak sa\u011flar). Sonras\u0131nda artboard\u0131n\u0131za \u015fekil ve t\u00fcr gibi \u00e7e\u015fitli bilgileri eklemenizi \u00f6neririz, b\u00f6ylelikle bir sonraki ad\u0131ma ge\u00e7meden \u00f6nce ihyita\u00e7 duydu\u011funuz \u015fekilde konumland\u0131r\u0131lm\u0131\u015f olacaklard\u0131r.<\/span><\/p>\n

    3-) Artboard\u2019\u0131n\u0131z\u0131 Kopyalay\u0131n<\/strong><\/span><\/p>\n

    \u0130htiya\u00e7lar\u0131n\u0131z do\u011frultusunda ilk artboard\u0131n\u0131z\u0131 kurduktan sonra ba\u011flamsal men\u00fcy\u00fc kullanarak \u00e7o\u011faltabilirsiniz. Layer<\/em>lar panelindeki Artboard 1<\/em>‘e sa\u011f t\u0131klay\u0131n ve Duplicate Artboard<\/em>‘\u0131 se\u00e7in. Bu i\u015flem ile boyutu ve pozisyonu ayn\u0131 olan, t\u00fcm i\u00e7eri\u011fi ve layer yap\u0131s\u0131 t\u0131pat\u0131p ayn\u0131 olan bir ba\u015fka artboard olu\u015fturulur:<\/span><\/p>\n

    \"Artboard-kopyalanmasi\"<\/p>\n

    Artboard\u0131n\u0131z\u0131 kopyalamak size tasar\u0131m\u0131n\u0131z\u0131n m\u00fckemmel bir piksel kopyas\u0131n\u0131 verir.<\/em><\/span><\/p>\n

    4-) Artboard\u2019\u0131n\u0131z\u0131n Yerini Belirleyin<\/strong><\/span><\/p>\n

    Artboard kullanman\u0131n en b\u00fcy\u00fck avantaj\u0131 ayn\u0131 anda t\u00fcm g\u00f6r\u00fcnt\u00fclerinizi g\u00f6rebilmenizdir. Bunu yapmak i\u00e7in, sadece gerekli artboardlar\u0131n\u0131z\u0131n yerini belirleyin. Bir artboard\u0131 ta\u015f\u0131man\u0131n \u00e7e\u015fitli yollar\u0131 var:<\/span><\/p>\n

      \n
    1. Se\u00e7ilmi\u015f bir artboard\u0131n sol \u00fcst k\u00f6\u015fesindeki X ve Y koordinatlar\u0131na girmek i\u00e7in Properties (\u00f6zellikler)<\/em> panelini kullan\u0131n.<\/span><\/li>\n
    2. Se\u00e7ti\u011finiz artboard\u0131 Photoshop’un i\u00e7indeki herhangi bir konuma s\u00fcr\u00fckleyin. Artboard, otomatik olarak birden fazla artboard\u0131 hizaya sokabilece\u011finiz ve konumlar\u0131n\u0131 bir \u00f6nceki bo\u015flu\u011fa sabitleyebilece\u011finiz etkin ve ak\u0131ll\u0131 bir rehberdir.<\/span><\/li>\n
    3. Se\u00e7ti\u011finiz bir artboard\u0131 ta\u015f\u0131mak i\u00e7in klavyenizin y\u00f6n tu\u015flar\u0131n\u0131 kullan\u0131n. Sadece y\u00f6n tu\u015funa basmak 1 piksellik bir harekete sebep olacakken Shift+Y\u00f6n Tu\u015fu<\/em>na bas\u0131l\u0131 tutmak on piksellik bir ta\u015f\u0131ma i\u015flemi yapacakt\u0131r.<\/span><\/li>\n<\/ol>\n

      5-) Artboard\u2019\u0131n\u0131z\u0131 Yeniden Boyutland\u0131r\u0131n (E\u011fer Gerekiyorsa)<\/strong><\/span><\/p>\n

      E\u011fer artboardlar\u0131n\u0131z\u0131n boyutunu ayarlaman\u0131z gerekiyorsa, yine birden fazla se\u00e7ene\u011finiz var:<\/span><\/p>\n

        \n
      1. Bir artboard\u0131 t\u0131klad\u0131\u011f\u0131n\u0131zda kendili\u011finden g\u00f6r\u00fcnen kollar\u0131 kullanarak yeniden boyutland\u0131rabilirsiniz.<\/span><\/li>\n
      2. \u00d6nceden belirlenmi\u015f boyutlar\u0131 se\u00e7mek i\u00e7in, \u00f6zel geni\u015flik veya y\u00fckseklik belirlemek i\u00e7in ya da dikey ve yatay y\u00f6nler aras\u0131nda ge\u00e7i\u015fler yapmak i\u00e7in File (dosya)<\/em> men\u00fcs\u00fcn\u00fcn hemen alt\u0131ndaki Options (se\u00e7enekler)<\/em> panelini kullan\u0131n.<\/span><\/li>\n
      3. Se\u00e7ti\u011finiz artboard\u0131n boyutunu de\u011fi\u015ftirmek i\u00e7in ve \u00f6nceden belirlenmi\u015f boyutlar\u0131na eri\u015fmek i\u00e7in Properties (\u00f6zellikler)<\/em> panelini kullan\u0131n.<\/span><\/li>\n<\/ol>\n

        \"Artboard-ozellikleri\"<\/p>\n

        Properties sekmesini kullanarak artboard\u0131n\u0131z i\u00e7in \u00f6nceden belirlenmi\u015f bir boyutu se\u00e7ebilirsiniz.<\/em><\/span><\/p>\n

        6-) Kendi Resminizi Yarat\u0131n<\/strong><\/span><\/p>\n

        Art\u0131k artboard\u0131n\u0131z ile \u00e7al\u0131\u015fabilir, gerekti\u011finde de\u011fi\u015fiklik yapabilir ve resim \u00f6\u011felerini de\u011fi\u015ftirebilirsiniz. Orijinal kurulumun iyi gitti\u011fini varsayarsak, art\u0131k do\u011fru yerlerdeki t\u00fcm \u00f6\u011feler ile m\u00fckemmel g\u00f6r\u00fcnt\u00fc pikselleri elde edebilirsiniz.<\/span><\/p>\n

        7-) Generate(Olu\u015fturma) Arac\u0131n\u0131 Kurun<\/strong><\/span><\/p>\n

        Generate <\/em>arac\u0131, artboardlar\u0131, layerlar\u0131 ya da \u00f6zel olarak adland\u0131r\u0131lm\u0131\u015f bir s\u00f6zdizimi kullanarak olu\u015fturulmu\u015f gruplar\u0131 d\u0131\u015far\u0131 aktarmak i\u00e7in imkan verir. Web<\/em> shortcutlar\u0131ndaki Save <\/em>(kaydet) se\u00e7ene\u011fi gibi davran\u0131r. PSD’niz i\u00e7in Generate’in a\u00e7\u0131k oldu\u011fundan emin olmak i\u00e7in File > Generate > Image Assets<\/em>: ad\u0131mlar\u0131n\u0131 izleyin.<\/span><\/p>\n

        \"Generate-Tool\"<\/p>\n

        \ud83d\ude0e Artboard\u0131n\u0131z\u0131 Yeniden Adland\u0131r\u0131n<\/strong><\/span><\/p>\n

        Generate<\/em>, layer grubunuzun (ya da artboard\u0131n\u0131z\u0131n) ad\u0131n\u0131 belirledi\u011finiz se\u00e7enekleri temel alarak ve resim \u00f6\u011felerinizi kaydederek \u00e7al\u0131\u015f\u0131r. Konuyla ili\u015fkin ayarlayabilece\u011finiz birka\u00e7 se\u00e7enek var:<\/span><\/p>\n