Web 2.0 Sticker (etiket) Yapımı
Sitemin Header alanında ve yeni yazıların üzerinde stickerlar görüyorsunuz. Bu stickerları (etiket olarak Türkçe’ye çevriliyor) artık birçok web sitesinde görmeye alıştık. Web 2.0′ın bize sunduğu tasarım yeniliklerinden birisi de bunlar. Yeni haberlerimizi, yeni dosyalarımızı veya çarpıcı olduğunu düşündüğümüz birçok şeyi bu stickerlar sayesinde web sitemizden duyuruyoruz. Ben bu yazımda size sürekli kullandığım yöntem ile bu tarz etiketlerin nasıl yapıldığını anlatacağım. Başka yöntemlerde var ancak, Oval Köşeler yazımda belirttiğim kadar kolay ve zahmetsizce bu işi yapacağız. (Hemen belirtmekte fayda var Photoshop versiyonunuz ne olursa olsun bunu yapabilirsiniz, ben şahsen 7.0 kullanıyorum ve yükseltmeyi de aklımın ucundan geçirmiyorum)Öncelikle Photoshop’ta yeni bir doküman açarak işe başlıyoruz. Ben 400*400px ve 72 resulation değerine sahip bir doküman tercih ettim.
Dokümanımızı açtıktan sonra yeni bir Layer oluşturup Tool menüsünden Custom Shape Tool aracını seçiyoruz. (U) Aşağı resimde görünen “8 Point Star” şeklini seçiyoruz.
Bu şekli seçtikten sonra Shift tuşuna basılı tutarak çokta büyük olmayacak bir 8 köşeli yıldız çiziyoruz. Yıldız şeklimizi çizdikten sonra hemen Ctrl+J tuş kombinasyonunu kullanarak mevcut yıldızın kopyasını oluşturuyoruz. Kopya oluştuktan sonra Ctrl+T tuş kombinasyonu ile yıldızı diğer yıldızın köşelerini ortalayacak şekilde döndürüyoruz. Bu döndürme işini yaparken çalışma alanınızı Ctrl++ tuş kombinasyonu kullanarak büyütebilir ve tam ortalama işlemi bittikten sonra Ctrl+- tuş kombinasyonu ile küçültebilirsiniz.
Döndürme işlemi bittikten sonra Layer 1 copy seçiliyken (yani ikinci yıldızımızın layeri seçiliyken) Layer 1 ile birlikte iki layeri birleştiriyoruz. (Aşağıdaki resimde layerların birbirine kilitlenmiş halini göreceksiniz, sadece layerin yanında bulunan göz işaretinin ötesine tıklamanız yeterli, böylece bir kilit işareti çıkacak ve layerlar beraber hareket edecekler)
Bu işlemi de yaptıktan sonra Ctrl+E tuş kombinasyonunu kullanarak iki shape layeri tamamen birleştirip tek bir layer haline getiriyoruz. Şimdi çalışma alanımızda sadece background ve shape 1 copy layerları kalmış olmalı. Bundan sonra yapacağımız şey yıldızımızın bulunduğu layer üzerine iki kere tıklayarak “Layer Style” penceresini açmak. Burda vereceğimiz özellikler ile stickerımızı şekillendireceğiz.
Layer özellikleri sekmesinde Drop Shadow, Gradient Overlay ve Stroke alanlarını işaretleyin. Şimdi bunları tek tek düzenleyeceğiz.
Drop Shadow sekmesine gelin ve aşağıdaki özellikleri uygulayın.
Gradient Overlay sekmesinde aşağıdaki işlemleri uygulayın.
Stroke sekmesinde de son olarak aşağıdaki işlemleri uygulayın.
Gördüğünüz gibi sitemde kullanılan stickere tıpatıp benzeyen bir sticker elde etmiş olduk. Renk seçimini tamamen size bıraktım, dolayısıyla hiçbir renk tavsiyesinde bulunmadım. Renk olayını kendiniz karar verip bulabilirsiniz. Sticker yapımında önemli olan 8 point star’ın sayısı ve döndürülme açısı. Ondan sonrası sizin zevkinize kalmış bir olay. Vermiş olduğum layer özelliklerinden harici özellikler vererekte stickerınıza daha fazla efekt katabilirsiniz.
Rastgele Yazılar
Web 2.0 Sticker (etiket) Yapımı yazısı için 11 yorum yapılmış...
Yorumunuzu Yazın
Bu yazıyı yüzümde bir tebessümle okudum. Nedeni son zamanlarda ortak bir konuya takıldığımızı gördüğümden sanırım :-) Mürekkep’te üst kısmı yapmaya çalışıyordum. Linux kullandığımdan Gimp ile neler yapabileceğime bakıyordum. Bayağı bir howto okuduktan sonra Gimp ile Web 2.0 badge ve layerları oluşturabiliyorum artık. Tabi oldukça amatörce. Bununla ilgili bir yazı; “Gimp Üzerinde Nasıl” versiyonunu yakında oluşturacağım. Burada anlatılanlar bir Photoshop kullanıcısı için bulunmaz bir nimet. Oldukça ayrıntılı, detaylı ve temiz bir anlatım. Ellerine sağlık.
[...] t-infection.com şu sıralar güzel makalelere yer veriyor. web 2.0′ın getirmiş olduğu yeniliklerden olan sticker ve oval köşelerin yapımını webthese, t-infection.com’da gayet güzel bir şekilde açıklamış. t-infection.com’daki anlatımlar sayesinde sizde kolayca bunları yapabileceksiniz. web 2.0 sticker (etiket) yapımı ve photoshop ile oval köşeler adlı yazıları okumanızı öneririm. ayrıca t-infection.com‘u sık kullanılanlarınıza eklemenizi öneririm. gayet güzel yazılar yazılıyor. [...]
Teşekkür ederim Alper bu güzel yorumun için. Ne yalan söyleyim Mürekkep’te o header’ı görmeseydim kesinlikle siteye böyle birşey yapmazdım. Çünkü Mürekkep’in header alanındaki resim beni çok etkiledi. Web 2.0′ı yürekten ve sade anlatıyor diye düşündüm ve hemen Photoshop’u açıp yukarıda gördüğünüz header resmini yaptım. Açıkçası bu kadar kolay yapacağımı düşünmüyordum çünkü çok zaman önce bir sitede nasıl yapılacağını öğrenmiş daha sonra hiç yapma fırsatı bulamamıştım. Kısmet bugüneymiş. İlham kaynağımın siz olduğunu söyleyebilirim. Bu arada Gimp’e geçmeyi düşünüyordum yakın bir zamana kadar ama PS’de çok eksiklerim olduğunu farkettim. Sonuçta halen MS Windows kullanıyorum ve Gimp’te en iyi verimi bir Linux dağıtımı üzerinde alacağımı tahmin ediyorum. O yüzden kendime yeni bir disk alıp bir Lin dağıtımı kurmadan Win için yapılmış Gimp’i kullanmayacağım.
Yorumun için tekrar teşekkür ederim.
t-infection.com’u 1 haftadır beğenerek takip ediyorum. Photoshop programıyla ilgili 2 tane çok güzel makale verdi.
Ancak web 2.0 kullanan arkadaşlara sadece güzel tasarımlar yapmak düşmüyor. Güzel tasarımlar yaparken dilimize de sahip çıkmak gerekiyor. Mesela “sticker” kelimesini kullanmak yerine etiket demek daha doğru olabilir. Ya da etiket daha geniş anlam ifade ediyor diyorsanız bir şekilde tdk ile irtibata geçerek bunun yerine daha güzel kelime önermesini isteyebilirsiniz.
Yazıyı yorumlarıyla birlikte baştan tekrar okursanız Türkçe sözcükler kadar yabancı sözcük kullanıldığını göreceksiniz. Bu yabancı sözcükleri gidermek ve de daha fazla yabancı sözcüklerin dilimize bu yollarla girmesini engelleyebilmek için tdk ile tasarımcıları buluşturan bir site yapılmasının çok faydalı olacağını düşünüyorum. Mesela tasarımcılar oraya “sticker” kelimesinin tam manasıyla Türkçesi nedir diye sorarlar. Tdk’dan bir yetkili de cevap olarak şu kelime kullanılabilir der. Eğer kelime beğenilmezse hangi kelime olabileceği gibi öneriler alınır vs. vs.
Hemen işin ayrıntılarına geçtim ama böyle bir çalışmanın Türkçeyi teknolojinin karşısında koruyabilmek için şart olduğunu düşünüyorum.
Saygılar.
Sevgili Cenk, öncelikle yorumun ve yaklaşımın için teşekkür ediyorum. Şimdi çok büyük bir yarama tuz bastın bende birşeyleri dile getirmek zorundayım.
Sonuç itibariyle ilgili yazımın başlığında Sticker (etiket) olarak belirttim. Ancak etiket sözcüğü Türkçe manası itibariyle birçok anlamı içine alabilecek bir sözcük. Bu nedenle benim yukarıda nasıl yapılacağından dem vurduğum şey bir benzetmeyle veya kelime oyunuyla hallolabilecek gibi gözükmüyor. Kaldı ki şu konuda suçluyum; bu kelimenin tam Türkçe karşılığını TDK’da aramadım. Bu konuda çok doğru söylüyorsun.
İkincisi şayet yazılarımı takip ettiysen hiçbir yazımda Türkçe’ye karşı en ufak bir yanlış yapmadığımı görebilirsin. (Türkçe hakkında yanlış değil Türkçe’ye karşı yanlış) Çünkü tüm yazılarımı düşünerek ve Türkçe imla kurallarına uygun yazmaya gayret ediyorum. Bu sayede sanırım insanlar blogumu daha iyi anlıyorlar. Sonuçta öz Türkçemizden başka dil kullanmıyorum. Yoksa başı boş şekilde Türkçe kullanarakta blog yazabilirim ama bunu yıllarca İstanbul’da yaşamış ve İstanbul Türkçe’sini (şivesini demem daha doğru olur sanırım) içine sindirmiş biri olarak yapamam. Sonuçta teknoloji ve tasarım ile ilgili makaleler derliyorum kendi çapımda, elbette tüm kelimelerin tam Türkçe karşılıklarını yazamıyorum. Bu nedenle de bazen yazılarımı geri çekiyor bazen de köklü değişiklikler yapma ihtiyacı hissediyorum.
Bir diğer değinmek istediğim konu ise Türkçemize sahip çıkmak adına kendi çapımda yürüttüğüm F Klavye’yi tanıma ve tanıtma çalışmalarım. Bunu tamamen Türkçemize, Türk Bilişimine hizmet olsun diye yapıyorum. Bizleri Q klavyeye mahkum eden herkese ama herkese çağrımı yineliyorum. Neden, çünkü F klavye bizim klavyemiz bizim yaptığımız bir çalışma. Neden, çünkü F klavye ile daha rahat ve daha doğru TÜRKÇE YAZABİLİRİZ!
Şimdi ben bunlardan dem vurup bazı konular üzerinde bu kadar hassasiyetle duruyorken sizin bana en azından kullandığım Türkçe ile ilgili söyledikleriniz gerçekten beni üzdü. Hemen belirteyim ard niyetiniz olmadığını düşünüyorum. Tamamen sitemin ve benim daha iyi çalışmalar sunmam için söylüyorsunuz ancak net dünyasına daha derin bakmanızı isteyeceğim sizden. Göreceksiniz ki burda gerçekten Türkçe konuşuluyor.
Değerli yorumunuz ve ayırdığınız güzide vaktiniz için teşekkür ederim size. (böyle yorumlara her zaman ihtiyacım var sitemde, gelişimime büyük katkı sağlıyorlar, tekrar teşekkür ediyorum hepinize)
Ben asla size ithafen bir şeyler söylemedim. Daha doğrusu böyle bir niyetle yazmadım yorumumu. Türkçe’nin gerçekten bu sitede diğerlerine göre çok çok daha iyi kullanıldığını söyleyebilirim.
“Yazıyı yorumlarıyla birlikte baştan tekrar okursanız Türkçe sözcükler kadar yabancı sözcük kullanıldığını göreceksiniz.” derken de asla Türkçeyi kötü kullandığınızı falan kastetmedim. İsim vermek istemedim ama siz üzerinize alınmayın diye isim veriyorum. Alper Orus arkadaşımızın yazdığı yorum pek Türkçe değil.
Ancak yorumumda üzerinde durmak istediğim konu gelişen teknolojiye karşı Türkçeyi nasıl koruyabileceğimizdi. Bunun için aklıma gelen bir şeyi siz tasarımcılarla paylaştım. Bir önceki yorumumda dediğim gibi bir şeyin yapılması ve yaygınlaştırılması bence çok faydalı olacaktır. İnşallah birisi veya birileri çıkıp da böyle bir çalışmaya imza atar.
Türkçeye göstermiş olduğunuz hassasiyetten ötürü size teşekkür ediyorum.
Saygılarımla.
Teşekkür ediyorum Cenk Bey. Güzel yorumunuzla biraz olsun kavrama fırsatım oldu. Belkide aceleyle bir yorum yazdım bende, kusurum olabilir, bağışlayın.
Gelişen teknoloji ve internet sayesinde Türkçemiz oldukça yozlaşıyor. Çünkü hayatımıza birçok kavram giriyor ve bu kavram karmaşası ışık hızıyla yayıldığı için bizler aynı hızda bunları Türkçeleştirip kendi hayatımıza adapte edemiyoruz. Bahsettiğiniz konuda çok haklısınız. Türkçemizi koruyabilecek her türlü oluşumda ben yer almaktan büyük onur duyarım. Özellikle ülke ve millet olarak hoş olmayan şeyler yaşadığımız şu günlerde buna daha çok ihtiyacımız var sanırım.
[...] Geçen Pazar günü itibariyle, daha önce okuduğum, notlar aldığım ve üzerinde gerçekten oldukça amatörce uğraştığım Gimp ile belirli şeyler oluşturma konusunda ciddi bir adım atmıştım. Yukarıda gördüğünüz gölgeli Murekkep.Org yazısını ve web 2.0 ile klasik haline gelen yıldız çerçeveli kısmı oluşturdum. Nihayet haftasonu geldi ve hafta boyunca yazmayı düşündüğüm bu yazıyı hayata geçirebilirim. Tabi ara teşvik olarak Volkan Karakuş’un photoshop üzerinde uygulayıp güzel bir makaleye dönüştürdüğü “Web 2.0 Sticker (etiket) Yapımı” yazısını unutmamak gerekir. Photoshop ile nasıl için faydalanabilirsiniz. Bayağı uzun bir yazı olacak, o yüzden başlayalım : [...]
Bu paylaşımınızdan dolayı teşekkur edıyorum oncelıkle…Bir sticker yapmadan önce ön araştırma yaparken buraya rastladım ve inceledim…Ayrıntılı bir şekilde yazmanız çok güzel gerçekten…Size bi sorum olacak photoshop versiyonunuz neden 7.0? Ve şuanda da onu mu kullanıyorsunuz?Tekrar teşekkürler…
@Merve, şu anda hala bilgisayarımda Photoshop 7.0 kullanıyorum. Bunun öyle pek bariz bir sebebi yok ancak şunu söyleyebilirim ki Photoshop’u sadece web uygulamaları yapmak ve template (şablon) geliştirmek için kullanıyorum. Dolayısıyla CS veya CS2′deki gibi farklı alanlardaki uygulamaları yapmak için kullanma gereksinimi hissetmiyorum. (Özellikle fotoğraf uygulamaları için Photoshop kullanan bir insan değilim, baskı işi de yapan bir insan değilim)
Sanıyorum hakim olduğum ve en iyi kullanabildiğim Photoshop versiyonu benim için 7.0. Bu yüzden bu versiyonu kullanıyorum. Emektar bilgisayarımın üst Ps versiyonlarında kendini biraz şaşırması bu saydığım şeylere eklenebilir. Umarım cevabım sizin için yeterli olmuştur. Saygılar.
[...] ile içinde hava boşluğu kalmayacak şekilde yapıştırıyorsun bu kadar kolay uygulanıyor. Sticker yapımı da çok [...]