Enes Ateş - Tasarım kutusu » Depo

15 Minimalist İkon Seti

enesates — Mon, 12 Jul 2010 09:45:49 +0000

Webdesignledger bizler için ağzımıza layık 15 minimalist ikon seti derlemiş. Setler için buradan.

Hazır Web Elementleri #4

enesates — Sun, 04 Jul 2010 08:08:33 +0000

Hazır web elemenleri serisine devam ediyoruz. Bu seride tasarımlarınızda kullanabileceğiniz 3D bantlar hazırladım. Önizleme için burayı indirmek için burayı ziyaret edin.

Haftanın Favorileri #4

enesates — Thu, 24 Jun 2010 13:35:32 +0000

Haftanın favorileri serisine pek fazla devam edemedik. Aslında not aldığım bir çok eğitsel ve arşivlik paylaşımlar var fakat bloguma yazmak için pek fazla vakit bulamıyorum. Bu haftanın favorileri şöyle.

Retro 3D Yazı Efekti ( Eğitsel )

Vibrant Stickers İkon Seti ( Depo )

Photoshop’ta bambu ağacı nasıl yapılır ? ( Eğitsel )

40 Temiz ve Minimal Wordpress Temaları ( Derleme )

Zarif 3D Yazı Efekti ( Eğitsel )

Bloggerlar için 50 Sosyal Ağ İkon Seti ( Depo )

3D Su Yazı Efekti ( Eğitsel )

Ferah bir müzik sitesi yapalım ( Eğitsel )

Hosting Web Arayüzü Tasarlıyalım. ( Eğitsel )

30+ T-Shirt Şablonu

enesates — Wed, 23 Jun 2010 20:53:54 +0000

T-shir tasarımlarınız için kullanabileceğiniz 30+ T-shirt şablonu için buradan.

Mini ve Mono İkonlar

enesates — Tue, 22 Jun 2010 06:15:54 +0000

Arayüz tasarımında ikonların öneminin yanılmıyorsam hepimiz farkındayızdır. Tasarımda kullandığımız ikonlar mümkünse set olmalıdırlar değilse aynı tarzda ikonları yakalamak zorundayız uyumluluk için, arşivimiz için burada bir çok ikon paylaştım fakat bu sefer ki bulmakta en çok zorluk çektiğimiz mini ve mono ikon setlerinden oluşuyor. Mini ve mono ikonları bulmak bir çiledir özellikle ikon arama motorlarında genelde parlak ve iri ikonlar karşımıza çıkı veriyor işte bu konuda bu derlemeler size yardımcı olacaktır bana olduğu gibi, arşivinizde hemen ” Mini ve Mono İkonlar ” adında yeni bir klasör oluşturun:) başlayalım..

500 Ücretsiz Harika Mini İkon !

Web Tasarım ve Yazılımda 30 Harika Mini İkon Seti

124 Harika Mini İkon

Mini İkon Seti

108 Mono İkon Seti

BONUS

İkon Fabrikası 227.758 ikon bulunan bu siteyi kesinlikle ziyaret etmelisiniz sitede harika bir eklentiyle sizde ikon çizerek katkıda bulunabiliyorsunuz. İster çizin arşive katkıda bulunun isterseniz çizilen güzel ikonları arşivinize ekleyin.

Depoyu Hazırlayın Harika İcon Setleri

enesates — Fri, 18 Jun 2010 01:11:08 +0000

Arşivinizde hemen bir yer açın Friendfeed ve takipte olduğum sitelerden ağzımıza layık ikon paketleri yakaladım ve buradan paylaşıyorum.

Ücretsiz Tatil – Gezi İkonları

Boolean 100 Mini İkon

Mini İkonlar By Umar

Android OS İkon Setleri

Harika Ulaşım İkonları

Web2.0 İkon Setleri

Web Tasarımında Kullanabileceğiniz Vektör İkon Paketi

32 px harika ikon seti

El çizimi harika ikonlar

Web2.0 origami ikonları

Web Browser İkonları

Hazır Web Elementleri #3

enesates — Tue, 18 May 2010 17:04:15 +0000

Web elementleri serisine devam ediyorum. Bu sette 4 farklı renkte tasarımlarınızda kullanabileceğiniz içerik kutucukları bulunuyor. Buradan inceleyebilirsiniz buradan da kaynak dosyaları indirebilirsiniz.

Hazır Web Elementleri #2

enesates — Fri, 30 Apr 2010 14:24:12 +0000

Merhaba, web elementlerin ikinci serisi kullanıma hazır :) bu paylaşımda hazırladığım kullanıcı arayüz birimlerini paylaşacağım. İletişim formlarında site içi aramalarda ve giriş formları sitenin en önemli kısımlarıdır. Tasarımlarımı incelediyseniz genel olarak sade, ferah ve temiz tasarımlarım vardır bu birimleride bu şekilde hazırladım çok fazla süslemeden iki renk olarak hazırladım. Buradan kaynak dosyalarını indirebilirsiniz.

Hazır Web Elementleri #1

enesates — Fri, 30 Apr 2010 12:44:56 +0000

Tekrar Merhaba, yeni paylaşımlar yapmayı planlıyorum bunlardan birtaneside web elemenleri, kullanıcı arayüz birimleri olucak. Boş vakit bulduğumda elimden geldiğince sizler için bu çalışmaları çıkarıp burada yayınlayacağım, yayınladığım kaynak dosyalarını istediğiniz yerde kullanabilirsiniz. Bugün web elementleri psd paketini sizlerle paylaşıyorum. Önizleme için buradan Kaynak dosyalarını buradan indirebilirsiniz.

Portal Tasarımı Nasıl Oluşturulur ? ( Web Tasarım Dersi )

enesates — Sun, 04 Apr 2010 15:34:15 +0000

Photoshop’ta web arayüz tasarımı nasıl yapılır ? Bu konuda eğitsel hazırlamak blogu ilk açtığım zamanlar da aklıma gelmişti. İş yoğunluğumdan dolayı eğitseli ancak şimdi hazırlayabildim umarım bu konuya meraklı arkadaşlara yeterince yardımcı olmuşumdur.

Eğitsele başlamadan önce, uygulamayı yapabilmeniz için orta düzeyde bir photoshop bilginizin olması gereklidir.

Hemen konuya girelim ilk olarak yapacağım web arayüz tasarımının taslağını kağıda çıkaralım. Ben ilk başta yapacağım çalışma hakkında karalamalar kesinlikle yapmalıyım renk kodlarını, tasarımda kullanacağım fontları, görsel efektleri taslağın hemen yanına not alırım ( uygulama esnasında bu fikirler tabii ki değişebilir. ).

Bu şekilde çalışmalara düzenli bir başlangıç yapmak her zaman iyidir o an aklınıza gelen fikirler uçmamış olur. Aynı zamanda kağıt üzerinde tasarımın iskelet haliyle bol bol oynayarak tasarımı çok daha rahat geliştirebiliriz, taslağınız çıktığında bazı web galerilerini gezmekte fayda var diye düşünüyorum, bu size yeni fikirler ve kullanım alanlarında ki stili, düzeni belirleminizde yardımcı olacaktır.

1. Çalışmanın Sonucu

1. Taslak Çalışması;

Yapacağımız tasarımın taslağını kağıt üzerinde çıkardık. Renk, font ve stil hakkında ufak notlarımızı aldık.

STEP 1

Yeni bir çalışma alanı açalım ( CTRL + N ) 1200px w ve 1414px, RGB Color. Yapacağımız tasarımın genişliği 946px olacak.

Cetvelimizi açalım ( CTRL + R ) 946 px alanını hemen belirleyelim.

STEP 2

Header tasarımına geçelim, yeni bir grup açıyoruz ( CTRL + G ), grup ismimiz HEADER. HEADER grubunda BG isimli yeni bir layer oluşturup notlarımız arasında kullanmak istediğimiz renk kodunu giriyoruz, gradient Tool ( G ) yardımı ile arka planımızı oluşturuyoruz.

Artı olarak arka planda çok daha iyi, içeriğe uygun olacağını düşündüğüm bazı figürler kullanmak istiyorum. Ben bulut seçtim kullanacağım photoshop fırçasını buradan indirebilirsiniz. BULUT isimli yeni bir layer oluşturuyoruz ve fırçamızla uygun yerleri dolduruyoruz.

STEP 3

Logomuzu hemen belirlenen alana ekliyoruz. Rectangle ” Kare “ aracı ile üst menümüzü oluşturuyoruz rengimiz #366e91 opacity değeri %61.

Header grubunun içerisinde ARAMA adında yeni bir grup oluşturuyoruz ( CTRL + G ). Rounded ” Oval ” rectangle aracı ( Radius: 3 px ) ile site içi arama kutucuğumuzu oluşturuyoruz renk kodu #317fb7

Blend Options ayarlarını açıyoruz , Inner Shadow veriyoruz değerleri .

Arama kutucuğumuzun içerisine site içi arama diye ufak bir yazı yazıyoruz. Sağ kısımdan tam 37 px boşluk alıyoruz sol kısma kadar ufak bir ayraç yapıyoruz, hemen yanına ara butonumuzu ekliyoruz, alt kısma çok arananlar bölümünü ekliyoruz ve grubumuzu kapatıyoruz.

STEP 4

Hemen menümüz ve alfabetik listemize geçiyoruz, HEADER grubunun içerisinde MENÜ adında yeni bir grup oluşturuyoruz ( CTRL + G ). Menümüzü oluşturuyoruz.

Rounded Rectangle aracımız ile çizimimizi ( Radius: 7 px ) yapıyoruz.

STEP 6

HEADER adlı grubumuzu kapatalım ve ORTA adında yeni bir grup oluşturalım ( CTRL + G )

Rectangle ” Kare ” aracı ile W: 748px – H: 258px boyutunda beyaz bir dikdörtgen çiziyoruz. Blend Options ayarlarından Inner Shadow veriyoruz değerleri.

Hemen konumuzla ilgili bir resim bulalım benim kullanacağım resim burada. Rectangle ” Kare ” aracı ile çizdiğimiz shape’in tam üstüne resmi yapıştırıyoruz. Resim katmanımıza sağ tıklayarak ” Create Clipping Mask ” diyoruz.

Tamamdır resmimiz oluşturduğumuz katmana maskelendi.

Sizde benim yaptığım gibi resimin alt kısmını aynı şekilde oluşturun.

STEP 7

Manşetimizin hemen yanına Haftanın En İyileri alanı ekleyeceğim ORTA isimli grubumuzu kapatalım ve HAFTANIN isimli yeni bir grup oluşturalım.

Rounded rectangle aracı ile ( Radius: 3 px ) W: 172px – H: 305 pxboyutunda bir çizim yapalım ( renk kodumuz #e0f2f5 ). Başlığımız 3D olacak başlığı oluşturmak için önceden hazırladığım

Web Tasarımın 3D Elementler adlı konu size yardımcı olacaktır.

İçeriği aynı şekilde dolduralım.

STEP 8

HAFTANIN adlı grubumuzu kapatalım ve REKLAMLAR adında yeni bir grup oluşturalım. Rounded rectangle aracı ile ( Radius: 3 px ) ( #e6e6e6 renk kodu ) W: 936 px – H: 108 px boyutunda

bir çizim yapalım.Blend Options ayarlarında Inner Shadows değerleri.

İçerisine aynı şekilde reklamlarımızı yerleştirelim.

STEP 9

Reklam adlı grubumuzu kapatalım ve GÜNÜN adlı yeni bir grup oluşturalım. Bu bölümde Günün Edebiyat Haberleri adlı içeriğimiz yer alacak.

Rounded Rectangle aracı ile ( Radius: 7 px Renk Kodu: #b8d1e1) , W: 650 px – H: 27 px boyutunda bir çizim yapalım. Blend Options ayarlarından Inner Shadow değeri.

AÇIK RENK : #c3dae8 gradient isimli yeni bir layer oluşturalım ve step4 tekrarlayalım.

STEP 10

GÜNÜN adlı grubumuzu kapatalım ve REKLAM adlı grubumuzu oluşturalım Günün edebiyat haberlerinin sağ tarafına 273 x 227 px boyutunda reklam atalım.

Facebook alanımız için rectangle ” Kare ” aracımız ile W: 277 px - H : 55 px boyutunda bir çizim yapalım. Renk kodumuz #3b5997. Blend Options ayarlarından Inner Shadows değerlerimiz.

Bu alanlarımızı da tamamlamış olduk.

STEP 11

Alt kısımdaki içeriğimiz için lütfen STEP 7 tekrarlayalım aynı mantıkta alt içeriğimizi oluşturup tasarımı tamamlayalım.

Ve tasarımımızı tamamlamış olduk. Portal Tasarımı Nasıl Oluşturulur ? adlı okuduğunuz için teşekkür ederim. Umarım yardımcı olabilmişimdir. İsteğe bağlı olarak dilerseniz aynı konuyu birde videolu anlatım yapabilirim anlamayan arkadaşlarım için.

Tasarımın kaynak dosyası için(.PSD) buradan. Tasarımı istediğiniz yerde kullanma hakkına sahipsiniz :) alta linkimi eklerseniz ayrıca mutlu olurum.

Beni takip ettiğiniz için teşekkürler.