Posts made in Nisan, 2010
30+ Floral Photoshop Fırça Setleri
Photoshop’la uğraşıp fırça kullanan bütün tasarımcıların vazgeçilmez tercihi, floral fırçalardır. Kıvrımlı çizgileriyle tasarıma kattığı estetik ve zengin görünüm, tercih edilmesinde büyük rol oynuyor, hiç şüphesiz. Ayrıca web sitesi, banner, afiş, logo gibi her türlü tasarımda da oldukça kullanışlı olması floral fırçaları haliyle vazgeçilmez yapıyor.
Türkçedeki tam karşılığı “çiçekli fırça” olsa da tasarım diline çoktan “floral fırça” diye yerleştiği için ben de aynı tabiri kullanmak istiyorum. Çünkü floral fırçaların içinde sadece çiçek değil, kıvrımlı çizgilerden oluşan fırçalar da olabiliyor. Bu kaynakta çeşit çeşit 30′dan fazla floral fırça seti bulunuyor. Hepsini ücretsiz olarak indirebileceğiniz bu fırça setleri, sanırım tasarımcıların dikkatinden kaçmayacaktır.
İndirmek için resimlerin üstüne tıklamanız yeterli.
Yeni nesil web tasarımcı olmak
Makaleme, her web tasarımcıyı ilgilendirecek bir soru ile başlamak istiyorum. Web tasarım trendlerini takip ediyor musunuz? Yoksa “Hayır, bildiğim bana yeter” diyenlerden misiniz? Eğer bu sektörde itibar kazanmak istiyorsanız trendi takip etmeli ve yeniliklere açık olmalısınız. Ve bu yeniliklere tasarımlarınızda yer vermekten çekinmemeniz gerekiyor. Yenilenmek, hayatta kalmaktır. Öyle ki kendini yenilemeyen hücrelerin öldüğü gerçeğini de hatırlayarak, kendinizi yenilemenin yollarını arayın. Aksi takdirde, web tasarım gibi çağımızın en geniş freelance sektörlerinden birinde farkınızı yaratamazsınız.
En son web teknolojilerini destekleyen tarayıcılara “yeni nesil tarayıcı” denildiği gibi o teknolojiyi kullanan tasarımcıya da “yeni nesil web tasarımcı” diyebiliriz bence. Ve bu konuyla ilgili giriş paragrafından iki ana başlık çıkarabiliriz.
1. Trendi takip etmenin yolları
2. Web tasarım trendleri
Konuyu birbiriyle doğrudan bağlantılı bu başlıklar halinde incelediğimizde, yeni nesil web tasarımcı olmak için gerekli ipuçlarını öğrenmiş olacaksınız.
1. Trendi takip etmenin yolları
Yeni nesil web tasarımcı olmanın yolu bu sektörde trendi takip etmekten geçiyor. Hızla gelişen ve dolayısıyla değişen web teknolojisini takip etmek kolay sayılsa da işiniz sadece takip etmekle bitmiyor. Bir de o teknolojiyi öğrenip web sitelerinizde kullanmanız gerekiyor. Bu da tabi ki fazladan efor ve zaman kaybı demek. Ama bunu başardığınızda, size getirdiği itibar ve finansal kazanç, harcadığınız emeğe kesinlikle değer.
Blogları takip edin: Web tasarım trendini takip etmenin en kolay yolu, dünyanın belki de en iyi freelance tasarımcılarının düzenli olarak yazdığı web tasarım bloglarını okumaktır. İngilizceniz olmasa bile “mavi renk kullanılan web siteleri”, “grunge efektli web siteleri” gibi güzel web sitelerinden derlenen harika örnekler yayınlanıyor. Bu tasarımları incelemek için ingilizcenizin olması gerekmiyor. Ayrıca Webrazzi, Bilgirgec gibi internet dünyasını yakından izleyen Türkçe blogları mutlaka düzenli olarak okuyun.
Sosyal Medyada Yer Alın: Zamanınızı Facebook’ta sadece Farmville oynayıp, komik video izleyerek geçirmek yerine sosyal medyayı iş konusunda lehinize çevirebilirsiniz. Sosyal medya ortamlarında tasarım gruplarına katılın ve aktif olarak yer alın. Beğendiğiniz web tasarımcıların Twitter sayfalarını takip edin. Araştırmalara göre, haberler en hızlı sosyal medya ortamlarında yayılıyormuş. Tasarım dünyasındaki haberleri de en hızlı sosyal medyadan öğrenebilirsiniz.
Sörf yapın: Sörf yapma sözünü uzun zamandır kullanmıyorum sanırım. İnternette gezmenin adına “sörf yapmak” diyorduk yıllar önce : ) Sadece blogları değil, ne kadar çok web sitesi gezerseniz aklınızda o kadar fazla tasarım kalacaktır. Sitelerde ilk defa karşılaştığınız özellikleri ve stilleri inceleyin. Sadece “güzelmiş” diyip geçmeyin. Beğendiyseniz onu öğrenmenin bir yolunu bulun. İnternette istemediğiniz kadar tasarım dersi bulunuyor.
Esinlenin: Tasarımda trendi takip ederken kendinizi geliştirmenin en basit yolu esinlenmektir. Beğendiğiniz tasarımlardaki yeni stilleri öğrenerek tekniğinizi geliştirin. Bu noktada dikkat etmeniz gereken nokta, tasarımın aynısını kopyalayıp çalmak yerine esinlenerek kendi tarzınızı yaratmaya çalışmaktır. Böylelikle trendi kendinize göre yorumlamış olacaksınız.
2. Web tasarım trendleri
Web tasarım trendleri bir yana, yeni nesil web tasarımcı olmanın bana göre ilk koşulu, öncelikle Table‘lardan tamamıyla vazgeçip html kodlaması için DIV kullanmaya başlamanızdır. Eğer hala Table ile kodlama yapıyorsanız daha fazla geç kalmamak için bir an önce Div yapısına alışsanız iyi olur.
Hiç kuşkusuz, web tasarım trendine bu yıl CSS 3 ve Jquery hakim. Tarayıcıların CSS 3′ü hala bütün özellikleriyle desteklememesini de düşünürsek, bu trend en az bir kaç yıl daha devam edecek gibi geliyor. CSS 3 ve Jquery’nin hayatımıza girişi ile birlikte bakalım web sitelerinde neler moda?
@font-face:
Arial, Times New Roman gibi standart sistem fontlarını web sitelerinde kullanmaktan sıkılanlar ya da başlıklarda ve Header, Banner gibi özel alanlarda farklı yazı tipi kullanmak isteyenler, daha önce sIFR, Cufon gibi Flash ve Javascript’in ortak uygulamalarını kullanmak zorunda kalıyordu. Bu da oldukça zahmetli bir uygulamaydı. CSS 3 dahilinde @font-face özelliğinin yayınlanmasıyla birlikte kullanım kolaylığı dolayısıyla hızlıca yaygınlaştı. Neredeyse bütün yeni web sitelerinde karşılaşmaya başladık.
Siz de aşağıdaki satırları CSS dosyasına ekleyerek, sitenizde @font-face kullanmaya bir an önce başlasınız iyi olur. Böylece daha etkileyici başlıklar ve Header’lar oluşturabilirsiniz.
|
1 2 3 4 |
@font-face {
font-family: Helvetica;
src: url(http://site/fonts/Helvetica.ttf);
} |
Bütün tarayıcılarda sorunsuz olarak çalışması için Fatih Hayrioğlu‘nun konuyla ilgili bu yazısından yardım alabilirsiniz.
Text-shadow:
Şüphesiz CSS 3′ün en çekici özelliklerinden biri text-shadow. Internet Explorer ısrarla desteklememeye devam etse de Firefox, Chrome, Safari gibi yeni nesil tarayıcı kullanıyorsanız, sitelerde sıkça kullanılmaya başlanan gölgeli yazılarla siz de karşılaşmışsınızdır.
Kullanımı da çok basit. text-shadow: #000 1px 1px 1px şeklinde yazarak istediğiniz gibi düzenleyebilirsiniz.
border-radius: explorer desteklemiyormuş, kimin umurunda? Explorer’ın kendisi utansın.
Box-shadow:
Son zamanlarda web sitelerinde gölgeli kutulara rastlıyoruz. CSS 3′te box-shadow özelliği ile DIV’lere gölge vererek sitedeki kutuların gölgeli görünmesini sağlayabiliyorsunuz. Explorer desteklemese de diğer tarayıcılarda sitenizin daha şık görünmesini sağlayabilirsiniz.
Box-shadow’un Mozilla (Firefox) ve Webkit (Safari, Chrome..) tarayıcıları şeklinde olmak üzere 2 farklı şekilde kullanımı var.
-moz-box-shadow: #000 1px 1px 1px
-webkit-box-shadow: #000 1px 1px 1px
Renk kodu ve gölge değerleri ile oynayarak farklı stiller elde edebilmeniz mümkün. Bu sayfadaki örnekler işinize yarayabilir.
Border-radius:
Ve nihayet yuvarlak köşeler yapmak için imaj kullanmak zorunda değiliz artık. DIV’lerin köşelerini box-radius özelliği ile istediğimiz yarı çapta yuvarlayabiliyoruz. Box-shadow ve box-radius’ü bir arada kullanarak çok şık kutular oluşturulabiliyor. Siz de bu şekilde bir kullanıma alışmakta iyi edersiniz.
Border-radius de aynen box-shadow’da olduğu gibi mozilla ve webkit için ayrı ayrı yazılmak zorunda.
Bütün köşelerin yarı çapı aynı olduğu durumlarda;
-moz-border-radius: 5px
-webkit-border-radius: 5px
Ancak her köşe için ayrı ayrı yarı çap yazılan durumlarda kullanımı Mozilla ve Webkit özelliklerinin yazılımı biraz farklı.
Mozilla tarayıcıları için;
-moz-border-radius-topleft:5px-moz-border-radius-topright:4px
-moz-border-radius-bottomleft:5px-moz-border-radius-bottomright:2px
Webkit tarayıcıları için;
-webkit-border-top-left-radius: 5px-webkit-border-top-right-radius: 4px-webkit-border-bottom-left-radius: 5px-webkit-border-bottom-right-radius: 2px
Jquery:
Yazılımcıların yanında tasarımcıların da yeniden javascript’e yönelmesini sağlayan bir javascript kütüphanesi, Jquery. Özellikle görsel etkiler üzerine geliştirilmiş yapısıyla birbirinden güzel animasyonlu menüler, resim slaytları ve daha bir çok hareketli yapılar hazırlanabiliyor Jquery ile. Ajax bilen yazılımcılar çok daha gelişmiş uygulamalar hazırlayabilir pek tabi. Ama hiç javascript bilmeyen tasarımcıların bile html kodlarına kolaylıkla ekleyebileceği şekilde basit ve kullanışlı bir yapısı var. Bu nedenle 2009′dan itibaren en çok kullanılan, neredeyse 3 siteden 2′sinde karşılaştığımız Jquery ile küçük ama etkileyici uygulamalar oluşturabilirsiniz. Bu müşterilerinizin de hoşuna gidecektir.
Örnek olarak referanslarımdan biri olan www.camateknik.com ‘da ana menüye Jquery ile uyguladığım animasyonu inceleyebilirsiniz. Sitelerinizde hala flash menü kullanıyorsanız, Jquery’e geçme vaktiniz gelmiş demektir.
Tipografi:
Web 2.0 anlayışının iyice benimsenmesi ve yaygın olarak kullanılmaya başlanmasıyla birlikte, web tasarımında da tipografi düzenine çok önem veriliyor artık. Önem sırasına göre düzenlenen yerleşim düzeni ve yazı tipi boyutlarının doğru seçimi ile siz de web tasarımında tipografiye önem vermelisiniz. Web tasarımında tipografi ile ilgili daha kapsamlı bir yazı yazmayı düşünüyorum. Şimdilik aşağıdaki örnekleri inceleyerek ne demek istediğimi anlayabilirsiniz.
Makaleyi beğendiniz mi?
Konu ile ilgili aklıma gelenler bunlar. Umarım beğenmişsinizdir. Web tasarımcıların kendini yenilemesi ve geliştirmesi için önemli ipuçlarından bahsettiğimi düşünüyorum. Eğer unuttuğum varsa sizin yorumlarınızla eksikleri beraber tamamlayabiliriz.
Makale ile ilgili yorum ve eleştiri yapmaktan çekinmeyin.
Devamını OkuHaftalık OZD #7
OZD Tasarım’ın 7. haftasında yine faydalı makaleler ve kullanışlı kaynaklar yayınlamaya çalıştım. Özellikle Prestashop ile ilgili makaleme göstermiş olduğunuz ilgiden sonra, bu konuya daha fazla önem göstermem gerektiğini farkettim. İlerleyen günlerde Prestashop ile ilgili yeni makaleler de okuyabilirsiniz. Tabi tüm hafta Prestashop’la geçmedi. WordPress geliştiricileri için oldukça kullanışlı ipuçları ve teknikler ile web tasarımlarınızda işinize yarayacak ücretsiz tasarım kaynakları OZD Tasarım ziyaretçilerine sunuldu.
OZD Tasarım’ın 7.haftasında yayınladığım makalelere aşağıdan ulaşabilirsiniz.
Prestashop: Ücretsiz hazır e-ticaret sistemi
Google Buzz İkonları
Ücretsiz vektörel grafik setleri
WordPress geliştiricileri için ipuçları ve teknikler
Web Tasarım Kaynakları #6
Web Tasarım Kaynakları #6
Web tasarım kaynaklarına 6.sı ile aksatmadan devam ediyoruz. Web tasarımlarınızda işinizi hızlandıracak ve kolaylaştıracak hazır butonlar, yazı tipleri, ikon setleri, photoshop fırçaları, dokuları ve actionları, vektörel grafikler gibi tasarım anında ihtiyaç duyabileceğiniz her türden hazır araçlarla oluşturduğum bu kaynağı da arşivinize katmanızı tavsiye ederim. Belli mi olur, bir gün mutlaka tam olarak aradığınız şey bunlardan biri olabilir. Resimlere tıklayın ve hepsini sıcağı sıcağına ücretsiz olarak indirin.
Black Buttons – Buton Seti PSD Dosyası
Cele’s Free Button Pack – Buton Seti PSD Dosyası
Color Diamonds – Buton Seti PSD Dosyası
Water Color Splatters – Vektörel Set
Green Floral Background – Vektörel
Colorful Backgrounds – Vektörel Set EPS Dosyası
Social Buzz İkon Seti
High Detail Social Icons – İkon Seti
Fungiiiiii – İkon Seti
Pack 53 Fonts – Yazı Tipleri
31 Fonts – Yazı Tipi Seti
12 Image Enchancement Actions – Photoshop Action Seti
i-Dark Photoshop Action
Rusty Aged Texture – Doku
Floral Brushes – Photoshop Fırça Seti
WordPress geliştiricileri için ipuçları ve teknikler
Wordpress kullanıcıları, deneyim kazanıp standart bir blog kullanıcısından iyi bir WordPress geliştiricisi seviyesine geldiğinde, genellikle WordPress’i istediği gibi düzenleyebilmek ve geliştirmek istiyor. Bu fikrim tecrübelerimle sabittir : ) İyi derecede CSS ve biraz da PHP bilgisi ile WordPress’i istediğimiz gibi değiştirebilmek, hem yaptığımız işe özgünlük katıyor hem de WordPress’e karşı olan sevgimizi büyütüyor galiba. Son zamanlarda CSS ile yapabildiğim görsel değişikliklerin haricinde işin arka planında PHP ile yapılabilecek düzenlemelere kafayı takmış durumdayım. Neler yapabilirim diye şöyle bir araştırdığımda ise istemediğim kadar fazla ayarla karşılaştım. En çok hoşuma giden ve sadece “functions.php” dosyasına eklenen bir kaç satırla yapılabilen ayarlardan bazılarını bir araya getirdim. Hepsini birden tek bir makalede toplayıp, upuzun bir yazı ile sizi sıkmak istemedim. WordPress geliştiricileri için daha fazla makale yazmayı planlıyorum.
Siz de eğer WordPress’i geliştirici seviyesinde kullananlardansanız bu gelişmiş ayarlar dikkatinizi çekecektir diye tahmin ediyorum. Bakalım WordPress’in arka tarafında neler yapabiliyoruz?
Yönetim paneline kendi logonuzu ekleyin
Yönetim panelinde sol-üst tarafta bulunan WordPress ambleminin yerine kendi logonuzu koymak isteyebilirsiniz. Ayrıca bir web tasarımcısı olarak müşterinize WordPress tabanlı bir web sitesi yaptıysanız yönetim paneline müşterinizin logosunu koymak hem onları daha fazla etkileyecek hem de sizi daha profesyonel gösterecektir.
Önce kendi logonuzu “custom-logo.gif” olarak yeniden adlandırın ve sunucunuzda yer alan, -kullandığınız- WordPress temasının “images” klasörüne logoyu kopyalayın. Daha sonra da aşağıdaki satırları “functions.php” dosyasına yerleştirin.
|
1 2 3 4 5 6 7 8 |
//hook the administrative header output
add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '
<!-- #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; } -->
';
} |
Yazılarınızın sonuna otomatik içerik ekleyin
Bazı bloglarda görmüşsünüzdür. Her yazının sonunda “RSS ile bu yazıyı takip edin”, “Yazıyı beğendiniz mi? Yorumlarınızı bekliyorum” gibi otomatik metinler ya da içerikler olabiliyor. Siz de blogunuzda yazdığınız her yazının sonuna aynı içeriği otomatik olarak eklemek istiyorsanız çözümü basit.
Aşağıdaki satırları “functions.php” dosyasının en altına eklerseniz, her yazınızın en altına “Yazıyı sevdiniz mi? Bu yazıyı RSS Feed ile takip edebilirsiniz” şeklinde otomatik bir içerik eklenecektir. Aşağıdaki html bölümleri düzenleyerek, otomatik içeriği istediğiniz gibi değiştirebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function insertFootNote($content) {
if(!is_feed() && !is_home()) {
$content.= "
<div class="subscribe">";
$content.= "
<h4>Yazıyı sevdiniz mi?</h4>
";
$content.= "
Bu yazıyı <a href="http://feeds2.feedburner.com/WpRecipes">RSS feed</a> ile takip edebilirsiniz.
";
$content.= "</div>
";
}
return $content;
}
add_filter ('the_content', 'insertFootNote'); |
WordPress güncelleme uyarısını kaldırın
Bildiğiniz üzere WordPress’in yeni sürümü çıktığında yönetim panelinizin en üst bölümünde bununla ilgili “Lütfen güncelleyin” şeklinde bir uyarı görüntülenir. Bazı WordPress kullanıcıları bütün değişiklikleri, güvenlik ayarlarını ve eklentilerini, kullandıkları mevcut sürüme göre düzenlediğinden yeni sürümünü yüklemek istemeyebilirler. Ya da bir müşterinize WordPress tabanlı web sitesi kuran tasarımcılar müşterilerinin bu güncelleme uyarısını görmesini istemeyebilirler. Böyle bir durumda en basit çözüm, bu uyarı mesajını kaldırmaktır.
Güncelleme uyarısını iptal etmek oldukça basit. Aşağıdaki satırları functions.php dosyasına eklediğiniz takdirde bir daha WordPress güncelleme uyarısını görmezsiniz.
|
1 2 3 4 |
if (!current_user_can('edit_users')) {
add_action( 'init', create_function( '$a', "remove_action( 'init', 'wp_version_check' );" ), 2 );
add_filter( 'pre_option_update_core', create_function( '$a', "return null;" ) );
} |
İçeriğinizi sadece kayıtlı kullanıcılara gösterin
WordPress yönetim panelinde, sadece kayıtlı üyelerin yorum yapmasını sağlayan bir seçenek var. Ama siz tercihen yazdığınız yazıların da sadece kayıtlı kullanıcılar tarafından görüntülenebilmesini isteyebilirsiniz.
Bu düzenlemeyi yapmak için yine “functions.php” dosyasına aşağıdaki kodları eklemeniz yeterli olacaktır.
|
1 2 3 4 5 6 7 |
function member_check_shortcode($atts, $content = null) {
if (is_user_logged_in() && !is_null($content) && !is_feed()) {
return $content;
} else {
return 'İçeriği görmek için üye olmanız gerekmektedir. Lütfen üye olun!';
add_shortcode('member', 'member_check_shortcode');
} |
Yukardaki satırları yazdığınız zaman sisteme giriş yapmayan kullanıcılar içeriği göremez.
Devamını OkuSponsorlar
