Grafik tasarımlarınızda veya web arayüzlerinde kullanabileceğiniz etiket & stickers paketini paylaşıyorum. İşinize yarayacağını umuyorum…

Etiket & Stickers Paketi İndir

Gelen aramalar :

• etiket
• etiket tasarımı

The post Etiket & Stickers Paketi first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Web arayüz tasarımı yapan web tasarımcıların işine yarayacak yüzlerce ikonu bulabilecekleri 2 adet .eps formatındaki çalışmayı paylaşıyorum. Site tasarlarken oldukça işinize yarayacak bir paylaşımdır. Arşivin de olmayan arkadaşlar indirerek kullanmaya başlayabilirler

Web Tasarım İkon İndir

Gelen aramalar :

• web ikonları indir

The post Web arayüz tasarım ikonları first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Psd buton tasarımlarını ücretsiz olarak indirebilir ve web sitenize uygun hale çevirerek kullanmaya başlayabilirsiniz.

1.Login (giriş) butonu indir

İndir

2.Creations PSD Buttons

İndir

3. 3D buton psd

İndir

4. Download butonu psd

İndir

5. Sepete ekle psd

İndir

6. Form mesaj butonları

İndir

7.  Web 2.0 butonları psd

İndir

Gelen aramalar :

• buton indir

The post Ücretsiz Psd Buton Tasarımları İndir first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Bu yazımda sizlerle 100 adet profesyonel kartvizit tasarımı paylaşacağım. Kartvizitler şirketlerin tanıtımları için harika bir materyaldir. Şüphesiz, bir şeyin dikkat çekmesi için diğerlerinden farklı, yaratıcı yani kısacası ilgi çekici olması gerekiyor. Klasik, ad soyad ve iş telefonun yazıldığı bir kartvizit tasarımı bilinir ki hiç ilgi çekmez. Dolayısıyla, bu gün sizlerle işini yaratıcılığa bağlayanların profesyonel kartvizitlerini, ilham perileriniz için paylaşmak istedim.

İşte o harika kartvizit tasarımları:

[book id=’5′ /]  << Flip Page Kartvizit Örnekleri için tıklayınız…

Gelen aramalar :

• kartvizit tasarımları
• kartvizit tasarım
• profesyonel fotoğraflar
• kartvizit tASARIMI
• ofis fotoları

The post 100 Adet Profesyonel Kartvizit Tasarımı first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

İlk olarak Kendimize Yeni bir sayfa açalım (istediğimiz boyutlarda)
Ardından Yazımızı yazarak aşağıdaki Efectleri Yapalım (efectler temsilidir isteyen istediğini yapar)

1) Yazımıza Yapacağımız 1. Efect

2) Yazımıza Yapacağımız 2. Efect

3) Yazımıza Yapacağımız 3. Efect

Efectlerimiz Bitti ise şimdi yazıyı paramparça etmeye geldi.

İlk olarak silgimizi alalım (yazı layeri seçili olsun) ve resmimizin üstüne tıklayalım bir uyarı verecektir: (This Type Layer must be rasterized before proceeding. Its text will no longer be editable. Rasterize the type?”

Böyle bir uyarı verir. OK dersiniz ve silgimizin kalınlığı aşağıdaki resimdeki gibi olsun.

şimdi resmi dilediğiniz gibi istediğiniz yerden ince ince silin

Sonucun Buna Benzer olması gerekir:

Sanalkurs

The post Photoshop ile yazıyı parçalamak first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Arkadaşlar genelde photoshopda html çıktısı ya da css çıktısı alma işlevini kullanmayız.Artık photoshop html ve css çıktısı alma noktasında baya bir ilerlemiş görünüyor sizlere bugün bahs edeceğim işlev Inline özelliğidir.

Tasarımınızı slice aracı ile parçaladıkdan sonra File – Save For Web & Devices yolunu izliyoruz.Diğer adımda Save dedikden sonra aşağıda göstermiş olduğum alan çıkıcak karşınıza.

Resimde gördüğünüz kısımda Other seçeneğini seçiniz.Bir sonra ki adımda karşınıza Output Settings ekranı gelicek görmüş olduğunuz ekranda Html drop kısmından Slices seçeiniz ve daha sonraki adım da Generate Css kısmını seçiniz.

Daha sonraki adımda Referenced kısmını Inline seçiniz Inline özelliği arkadaşlar size hem tasarımınızın html çıktısını verir ayrıca bunu divlerle yapar ve ve diğer bir özelliği ise csslerini divin içine atar.

sanalkurs

The post Photoshop Inline Özelliği first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Dersimizin 1. bölümünde Photoshop’ta sitemizi tasarlamıştık. Şimdi de bu tasarımı Dreamweaver’da kullanmada.

Sitemizi tasarlayıp Photoshop’ta kaydetmiştik ve elimizde images adlı bir klasör ve sitemiz.html oluşmuştu. Sitemiz.html bizi fazla alakadar etmiyor. images klasörü içerisindeki parçaladığımız resimleri sitemizde uygun yerlere koyacağız.

Şimdi Dreamweaver?ı açıyoruz, sıfırdan başlıyoruz. Layout Table ile 800?e 600lük bir alan hazırlıyoruz. Arka plan rengimizi kırmızının tonlarından bir tanesini seçtim. Şimdi resimleri üzerine yerleştirme zamanı geldi.

Şimdi tek yapmamız gereken ölçülerle Layout Table oluşturmak. En önde 190 piksellik bir kare vardı. Oraya logomuzu koyacaktık. Öncelikle onun için bir tablo oluşturalım.

Şimdi de arka plan için üst tarafta oluşturduğumuz bölümü yapalım. Onun da yüksekliği 90 pikseldi. Aşağıda göründüğü gibi çizelim.

Şimdi arka plan belirlemek için Standard görünüme geçiyoruz.

Properties bölümünde bulunan Bg bölümünden resmimizi buluyoruz.

Resmi bölerken üst bölümdeki geçişi 2 piksellik bir resim olarak kaydetmiştim. Resim kendisini devam edeceği için bu resmi seçiyoruz.

Sitemiz şu hâli aldı. Oluşan çizgiler de çizdiğimiz tabloların kılavuz çizgileri. Siteyi kaydettiğimizde bu çizgiler gözükmeyecek.

Butonlarımız vardı. Draw layout cell ile butonların büyüklüğü kadar bölümler oluşturuyoruz. İstersek bu alanı tek bir bölme olarak hazırlayıp öyle de butonları yerleştirebiliriz.

Alanı seçip Common menüsünde Image seçeneği ile ekliyoruz. Diğer seçenekleri de kullanabiliriz ama dersin içeriği bakımından yüzeysel olarak anlatıyorum.

Resmi ekledikten sonra butonları seçip Properties bölümünden bağlantıyı sağlıyoruz.

Üstteki butonlara isim verdikten sonra kabaca sitemiz bitmiş oluyor. Şimdi metinlerin bulunacağı bölümü yapmaya başlıyoruz.

Şimdi şöyle bir detay verelim. Layout bölümünde ?Layout Table? ve ?Draw Layout Cell?i inceleyelim. Sitemizin temelini buradan oluşturuyoruz. Layout Table ile sitemizdeki tabloları oluşturuyoruz. Draw Layout Cell ile de yazı alanımızı oluşturuyoruz. Her ikisini de gerektiği yerde kullanabiliyoruz. Layout Table?ın içerisine Layout Table tekrar çizebiliyoruz. Ama Draw Layout Cell içerisine Layout Table veya Draw Layout Cell çizemiyoruz. Bu mantığı oturttuktan sonra alanımızı çizelim.

Şimdi Photoshop ile tasarladığımız klasörden gerekli parçaları buluyoruz. Soldaki menü için anlatmak gerekirse, 3 parçadan oluşmaktadır. Bir tane gelişigüzel bir Layout Table çiziyoruz. Genişliğimiz 200 pikseldi. Gölgelendirme verdiğimiz için 200 pikselden biraz daha büyük olmayacaktır. Resmimizin üzerine geldiğimizde bir bilgilendirme kutusu çıkıp resmin boyutlarını görmemize yardımcı olacaktır. Resmimiz gördüğünüz gibi 205 piksel genişliğinde ve 9 piksel uzunluğundaymış.

Üstte ve altta bulunan oval köşeli bölüm için bir tane uygun boyutlarda Layout Table çizip arka plana gerekli resmi koyacağız. Ama önce dediğimiz gibi menü uzunluğunda bir Layout Table çiziyoruz. Resmimiz 205 piksel genişliğindeydi. Bu Layout Table da 205 piksel genişliğinde olmalı. Yüksekliği de şimdilik önemli değil. Gelişi güzel bir uzunlukta bırakıyoruz.

Deminki resmimizi yerleştireceğiz. Bir tane daha Layout Table çizeceğiz. 9 piksel uzunluğunda, table?ın içerisine ve en üstüne sabitlemeliyiz.

Tablomuzu oluşturduktan sonra Standart görünüme geçip arka planımızı bu bölgeye atıyoruz. Aşağıdaki Properties bölümünden yapıyoruz. Ardından aynı işlemi aşağıdaki bölüm için de yapıyoruz. Bu resmimizin uzunluğu da 15 pikselmiş. Onun için tablomuzun alt tarafına 15 piksel uzunluğunda bir tablo çizip bu resmimizi yine arka plan olarak atıyoruz. Bu işlemden sonra işimiz bitti gibi.

Ön izleme yaparak yerleştirdiğimiz şekilde bulunduğunu görebiliriz. Şimdi Layout bölümüne gelerek ortada bulunan alanı yapıyoruz. Bu bölgeye yazı yazacağımız için bu bölgeyi Draw Layout cell ile yapacağız. Arada kalan bölgeyi tamamen Draw Layout cell ile oluşturup arka planı belirlediğimiz 2-3 piksel olarak kaydettiğimiz aradaki bölümü arka plan olarak atıyoruz buraya.

Gördüğümüz gibi 3 piksellik bir resim ile tüm bölümü oluşturmuş olduk. Bu sayede sitemiz hem hantallıktan kurtulmuş, hem de güzel bir görünüme kavuşmuş olacaktır. Ortadaki bölümü Draw Layout cell ile yaptığımız için yazı yazdığımız zaman biraz fazla menü olursa bölüm kendini otomatik olarak uzatacaktır. Arka plan resmimiz de kendini otomatik olarak uzayan bölgeyle beraber uzamaya devam edecektir. Şimdi Aynı şekilde orta bölgedeki yazılarımızın olacağı bölümü de oluşturuyoruz?

Sitemiz kullanılabilir bir durumda. Size sadece içerisini doldurmak kalıyor.

Mesela bir ayakkabı firmasının sitesi olarak tasarlamış olalım? Sitemizin içeriğini yerleştirdikten sonra işimiz bitmiş oluyor.

Tasarım aşamasındayken transparan çalışmıştık. Şimdi de bu transparan çalışmamızın kolaylıkları sayesinde sitenin görünümünde değişiklikler yapalım?

Gerisi sizin yaratıcılığınıza kalmış bir şey. Başarılar dilerim?

(Unutmayın: Bu dersi tablolarla anlattım. Yeni başlayanlar “Tablolarla anlatılmış, daha kolaydır, divlerle hiç uğraşmayayim” gibi bir düşünceye kapılmasın. 1. dersin başında da bahsettiğim gibi bu 2 ay önce hazırlamış olduğum bir ders. O zamanlar divlerle pek aram olmadığı için tablolarla hazırlamıştım. Kesinlikle divlerle çalışmanızı öneririm. Div mantığını kavradığınız zaman bu tip siteleri yapmanız çok daha basit olabiliyor.)

The post Photoshop ile yaptığımız bir tasarımı Dreamweaver'a nasıl aktarırız first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Bu derste sizlere Photoshop ile tasarlanan bir siteyi nasıl kullanılabilir duruma getireceğimizi anlatmaya çalışacağım. Takıldığınız noktalarda elimden geldiğince yardımcı olmaya çalışırım. Bu ders Sanalkurs 8. Sayı’da yayınlanmıştır. Dersi yaklaşık 2 aydan daha önce hazırlamış olduğumdan değişmiş bazı şeylerin eski olduğunu göreceksinizdir. Mesela siteyi ben 800 x 600 tasarlamışım. Halbuki artık bu boyutlar tercih edilmeyen boyutlardır. Şu anda genel olarak 1000 genişliğinde siteler tasarlanıyor ve çok daha verimli olduğu kanısındayım ben. Unutmadan belirteyim. Dersi Photoshop ve Dreamweaver CS3’te anlattım. Photoshop CS4 kullananlar fazla zorlanmayabilir belki ama Dreamweaver CS kullanan ve başlangıç aşamasında olanlar biraz zorlanabilir. Ama temel mantığı kaptığınız zaman pek sorun olacağını sanmıyorum.

Ders biraz kapsamlı ve uzun olduğundan 2’ye böldüm. 1. Bölümde Photoshop’ta tasarımı, 2. Bölümde de Dreamweaver’da kullanımını anlatacağım. Fazla uzatmadan derse geçelim…

Ctrl+N ile yeni bir çalışma sayfası açıyoruz. Sitemizin boyutunu belirliyoruz. Genelde siteler 800 x 600 boyutlarıyla yapılır. Uzunluğu bazen 600?den fazla olur ama genişliği genelde 800 pikseldir. Arka planımız beyaz ya da belirlediğiniz herhangi bir renk olabilir. Ama şeffaf (transparent) olmasını ben daima öneririm. Nedeni ise sitemizde arka plan rengimizi değiştirdiğimiz zaman şeffaf bölgelerin o rengi alabilmesi olarak açıklayabilirim. Transparan özelliği size yeri geldiğinde çok yarar sağlayabilir. Yine de sizin tercihinize kalmış bir şeydir elbette.

Eğer Photoshopta cetvelimiz açık değil ise Ctrl+R ile cetvelimizi açık konuma getiriyoruz. Photoshop?un özellikle site tasarım konularında işimize yarayan bir özelliği de budur. İlerideki aşamalarda bu cetvel sayesinde referans noktalarını belirleyeceğiz.

Rectangular marquee tool ile işe başlıyoruz. Bildiğiniz gibi üst menüden gerekli ayarlamaları yapıyoruz. İstediğimiz ilk önce sitemizde üst taraftan bir alan yaparak başlayalım. Unutmayın ki tasarıma daima arka planları yaparak başlamanız yararınıza olur. 800?e 90 piksellik bir alanımız olsun ve bu alan renk geçişli olsun. Üst menüden gerekli ayarlamaları yapıyoruz.

Çalışmamıza tıkladığımız zaman belirlediğimiz ölçüde alanı çalışmamızda seçili hâle getirecektir. Bu alanı istediğimiz yere taşıyabiliriz.

Gradient Tool ile istediğimiz renk geçişini gerçekleştiriyoruz. Gri renkten siyah renge geçiş yapalım.

Alanımız seçili hâlde iken üstteki cetvele tıklayıp sürüklemek suretiyle kılavuz çizgisi atıyoruz. Bu aşama dreamweaver?a aktaracağımız zaman resimleri bölmemizde çok kolaylık sağlayacak. Atadığımız çizgi mavi bir şekilde çalışmamızın dışına taşacak ama merak etmeyin bu çizgi sadece kılavuz çizgisi ve çalışmamızda bu çizgi gözükmeyecek.

Şimdi de sitemizin logosunu koyacağımız bir yer yapalım. 190?a 190lık bir kare oluşturalım Marquee Tool ile.

Yeni bir katman oluşturup alanımızı belirleyip içerisini belirlediğimiz bir renk ile dolduruyoruz. Ben siyahı tercih ettim.

Şimdi de Marquee Tool ile çerçevesi yapalım alanımızın. Rectangular Marquee Tool?u seçtiğimiz zaman yukarıdaki seçeneklerden ?Intersect with selection? seçeneğini seçerek seçeceğimiz alan ile seçeceğimiz alanın ortak bölgesini seçili hâle getirelim.. Çerçevemiz 5 piksellik olması için şimdi oluşturacağımız kare 180?e 180 olmalıdır. Biraz daha estetik katmak için Feather?ını da 5 piksel verelim. Bu sayede köşeleri keskin olmak yerine yuvarlak olacaktır.

Alanımızı seçtik. Kenarları ovalleştirmek tasarımımızı doğrudan etkilemiş oluyor.

Seçtiğimiz alanı beyaz renk ile boyuyoruz. Daha sonra buraya logomuzu
yerleştireceğiz.

Şimdi 40 piksel uzunluğunda butonlarımızı yine Marquee tool ile yerleştirip üzerine isimlerini yazalım. Blending Options ile de butonlara gölge verelim.

Şimdi de sol tarafta menülerimizin bulunacağı alanı yapalım. 200?e 100?lük marquee tool ile alan belirliyoruz. Bu menünün uzunluğunu yeterince uzun yapmalıyız. Şimdiki aşamada sadece görünümü belirliyoruz. Uzunluğunu dreamweaver ile ayarlayacağız. Bu alanı daha rahat kullanabilmemiz için kılavuz çizgilerle de belirliyoruz. Ardından Rounded Rectangle Tool ile köşeleri yuvarlak bir dikdörtgeni seçtiğimiz alana oturtuyoruz. Aynı işlemi yazılarımızın gösterileceği yer için de yapıyoruz.

Aşağıda boş kalan kısımları Crop Tool ile kesiyoruz. Slice tool ile gerekli yerlerini ayırıyoruz. Burada dikkat etmeniz gereken şey ise kullandığınız gölgelendirmeler ile kesmek ve gerekli olduğu kadar kesmektir. Unutmamanız gerekiyor ki siz bunu dreamweaver?da yerleştirirken zorlanmamanız gereken her şeyi yapmalısınız. Zamanla bu bilinci kendinizde otomatik olarak oturduğunu göreceksiniz. Ardından çalışmamız son hâlini alıyor.

Şimdi çalışmamızı File / Save for Web ile kaydediyoruz.

İşte geldik işin en önemli noktasına. Dikkat ederseniz renklerimiz büyük ölçüde kaybolmuş gibi duruyor. Bunun nedeni çalışmamızı bölmüş olmamız. Aslında renkleri normal ama öyle gösteriliyor. Bu pencereden üzerine tıkladığınız yerlerin normal hâle geldiğini göreceksiniz. Seçili olup olmama durumu diyebiliriz. Ayrıca demin bahsetmediğimiz bir şeyden bahsetmek istiyorum. Bölme yaptığımız zaman kılavuz çizgilerimizi gerektiği kadar kullanmamız gerekiyor. Tekrarlanan resimleri daima 2-3 piksellik resimler hâline getirerek kullanmak sitenin hantallığını engellemek bakımından çok önemlidir. Unutmayın, sitenizin tasarımını burada ne kadar akılcı bölerseniz işinizi o kadar kolaylaştırırsınız ve sorunsuz halledersiniz.

Sağ taraftaki menüden gerekli ayarlamaları yapıyoruz. Transparan çalıştığımız için jpeg olarak kaydetmemiz yanlış olur. O yüzden png-24?ü seçiyoruz. Eğer transparan çalışma yapmasaydınız bile yine size jpeg olarak kaydetmenizi önermezdim. Çünkü jpeg olarak kaydettiğiniz zaman grafiklerde az da olsa değişiklik oluyor. Düz renklerde bile piksellerde bozulma görüyorsunuz. Bunun olmaması için de transparan olmayan çalışmalarınızda da png ya da gif ile çalışmanızı öneririm şahsen. Yine sizin tercihinize kalmış bir şey.

Sitemiz.html olarak kaydettiğimizde nereye kaydettiysek oraya html ve images klasörünü görebiliyoruz. Böldüğümüz resimler images klasörü içerisinde bulunuyor.

Dersimizin 1. bölümü burada sona eriyor. 2. Bölümde görüşmek üzere…

The post Photoshop ile yaptığımız bir tasarımı Dreamweaver'a nasıl aktarırız first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Bu derste Firefox tarayıcılarında kullanılan butonun aynısını yapmaya çalışacağız.

300×300 boyutunda yeni bir sayfa açın ve arkaplanı beyaz olsun.

Yeni bir layer oluşturun ve “Rounded Rectangle Tool” ( ) ile 145 px x 30 px büyüklüğünde bir dörtgen çizin.

Efekt ayarlarını açın ve aşağıdaki ayarları yapın:

[center]

Yeni bir layer daha oluşturun ve zoom yaparak sayfayı %300 büyütün.

Eyedropper aracı ile dörtgenin köşe rengini seçin ve “Pencil Tool” ( ) ile 1 px fırça ayarı ile buton içine dikey bir çizgi yapın.

Evet, butonumuz şimdi bitmiş durumda. Şimdi bazı özelleştirmeler yapacağım.

Yeni bir layer oluşturun ve sahneye Firefox ikonu import edin, Ctrl + T ile boyutunu ayarlayın ve opacity ayarını %60 yapın.

Şimdi text aracını seçin ve “Get Firefox” yazın. (Ben Amazon isimli fontu kullanıyorum.) Efekt ayarlarını açın ve aşağıdaki gibi ayarlayın:

İşte sonuç:

Şimdi yeni bir layer oluşturun ve Shape aracını seçin, sonra aşağıdaki ok simgesini bulun.

Ve onu sahneye çizin, yönü aşağı olarak ayarlayın. Sonra efekt panelinden aşağıdaki ayarlamaları yapın.

Bitti. Şimdi “Get Firefox” yazılı butonumuz hazır.

The post Photoshop da buton yapımı first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.