adobewordpress ~ güncel tasarım okulu
  • Adobe
    • Photoshop Dersleri
    • After Effects Dersleri
    • Illustrator Dersleri
  • WordPress
    • Eklentiler
    • Temalar
    • Güvenlik
  • Duvar Kağıtları
  • Tasarım Unsurları
    • PHP Dersleri
    • HTML5 Dersleri
    • CSS Dersleri
    • jQuery
    • Bootstrap
    • SEO Dersleri
    • Kaynaklar
    • İlham Verenler
    • Diğer Konular
  • Video Dersler
  • Yazarlar

Temel Giriş Paneli Tasarlama

7 sene önce16 Kasım 2012 Vatanay Özbeyli İpuçları, Photoshop Dersleri, Sizden Gelenler

Merhaba arkadaşlar bu anlatımımda Photoshop kullanarak basit bir giriş paneli tasarlayacağım.Kullanacağım Photoshop sürümü ise CS4 Türkçe’dir.

1. Adım : İlk olarak rahat çalışabilmek için 500×500 boyutlarında çalışma alanı (CTRL+N) açıyorum. Çalışma alanımın arkaplanı saydam. Siz kullanacağınız alana göre renk atayabilirsiniz.

2. Adım : Sol taraftaki araç menümüzden Köşeleri Yuvarlanmış Dikdörtgen Aracı‘nı seçiyorum.

3. Adım : Ardından yukarıdaki menüden Yarıçap ayarını 8 yapıyoruz.

4. Adım : Göz kararı bir dikdörtgen çiziyoruz.Boyutu öğrenmek isterseniz 300×200’dir.

5. Adım : Sağ Taraftaki Katmanlar Kısmından katmanımızın üstüne çift tıklıyoruz.

6.Adım : Yeni açılan pencereden geçişli yer paylaşımını seçiyoruz ve üstüne tıklıyoruz.

7.Adım : Ardından geçiş kısmına tıklıyoruz. Bu kısım sizin zevkinize göre bir kısım ama ben koyu mavi #0025b0 rengini seçiyorum. Diğer rengi ise daha açık bir mavi #0600ff rengini seçiyorum.

Şimdilik durum bu :

8. Adım : Ardından üst tarafa Dikdörtgen Aracı ile bir dikdörtgen çiziyoruz.

9. Adım : Katmanlar menüsünden küçük katmanımızı büyük katmanımızın altına sürükleyerek bırakıyoruz.

10. Adım : Şimdi ise Düzen > Yolu Dönüştür > Çarpıt Diyoruz.

11. Adım : Sağ Üst köşeyi biraz aşağı indiriyoruz ve yön tuşları ile yukarı çıkartınız.

12. Adım : Ardından daha öncede yaptığımız gibi katmanlar menüsünden katmanımıza çift tıklayıp Geçişli Yer Paylaşımı’nı seçiyoruz. Bu seferde yeşil renk tonları kullanıyoruz.

13. Adım : Aşağıdakine benzer bir görüntü elde ediyoruz.

14. Adım : Üst taraftaki yeşil kısıma Giriş yazıyoruz.

15. Adım : Ardından Köşeleri Yuvarlanmış Dikdörtgen Aracı‘nı alıyoruz.
Yarıçap‘ı 5 ayarlıyoruz.

Ve göz kararı bir dikdörtgen çiziyoruz.

16. Adım : Ardından Ctrl + Alt + basılı tutarak dikdörtgeni sürüklüyoruz. Böylece kopyalama oluşturmuş oluyoruz.

17. Adım : Ardından yazılarımızı yazıyoruz.

18. Adım : Şimdi de Giriş Buttonu‘nu yapıyoruz.

İlk olarak göz kararı bir dikdörtgen çiziyoruz.
Ve katmanı çoğaltıp büyütüyoruz.
Etrafında bir çizgi oluşacak.

Bu da ilginizi çekebilir  Photoshop ile Instagram'ın Nashville Filtresini Hazırlıyoruz

19. Adım : Ardından Kalem Aracı‘nı seçiyoruz.

20. Adım : Sağ tıklayıp Seçim Yap diyoruz.

21. Adım : Ardından temel arka planı seçiyoruz.

22. Adım : Ardından Katmanı Pikselleştir Diyoruz.
Sonrasında Ctrl + X Yapıyoruz.
Ve ardından Ctrl + D Diyoruz.
Şimdi ise buttonu kopyalamıştık, onu siliyoruz.

23. Adım : Son olarak buttonun içine giriş yazıyoruz.

Ve sonuç :

Bu yazı AdobeWordPress’e dışarıdan eklenmiştir.

Kaynak : http://www.sanalikaforum.biz/konu-giris-paneli-tasarim.html

Share on Facebook Share
Share on TwitterTweet
Share on Google Plus Share
Share on Pinterest Share
Share on LinkedIn Share
giriş login panel paneli Photoshop Dersleri sanalikaforum Tasarım


Yazı navigasyonu

Photoshop ile Boyama ve Renklendirme Teknikleri -1-
DISQUS’ı Türkçeleştirme & Özgünleştirme

SOSYAL

E-Posta Aboneliği

Güncel eğitimlerden haberdar olmak ister misin?




Arama

Benzer Yazılar

  • Photoshop ile Gün Doğumu
  • Photoshop ile Gerçekçi Sinema Efekti
  • Mobil Uygulama Tasarımı
  • Photoshop ile Dramatik Fotoğraf Efekti -1-
  • Haftanın İlham Kaynakları #12
  • Haftanın İlham Kaynakları #4
  • WordPress Tema Geliştiricilerine Özel, Karşınızda Theme-Check!
  • Web Sayfanıza Etkileyici Giriş Paneli
  • Photoshop ile Patlayan ve Parçalanan Yazı Efekti
  • Photoshop ile Fotoğraftan Obje Silme

Popüler Örnekler

  • Ambilight ile Bootstrap Slider Kullanımı 16706
  • Yukarı Scroll Edildiğinde Gözüken Header 12495
  • Sitenize Haber ve Duyuru Akışı Ekleyin 12456
  • Material Design Öne Çıkarılmış Menü Tasarımı 11076
  • Mobil Sitenize WhatsApp ve Diğer Sosyal Paylaşım Linkleri Ekleyin 10837
  • Sitenize Kolayca Slider Ekleyin 10654
  • CSS ve jQuery ile Dönen Menü 9366
  • Sadece CSS ile Slider Yapımı 9360
  • Fareyle Birlikte Hareket Eden Arkaplan Resmi 9017
  • jQuery ile Scroll ve Arkaplan İlişkisi 7654

Kategoriler

  • Photoshop Dersleri95
    • Fotoğraf Efektleri
    • Yazı Efektleri
    • Actionlar
    • Fırçalar
    • Patternler
    • İpuçları
  • After Effects Dersleri4
  • Illustrator Dersleri4
  • WordPress83
    • Eklentiler
    • Temalar
    • Güvenlik
  • Tasarım Unsurları113
    • PHP Dersleri
    • Bootstrap
    • HTML5
    • CSS3
    • jQuery
    • SEO
    • Kaynaklar
    • İlham Verenler
    • Diğer Konular
  • Video Dersler53
  • Öne Çıkanlar104

Bağlantılar

  • Anasayfa
  • Hakkımızda
  • Reklam
  • Kullanım
  • Yazarlık Başvurusu
  • Arşiv
  • İletişim

Bumerang - Yazarkafe

Kategoriler

  • Tasarım Unsurları 388
  • Öne Çıkanlar 104
  • Photoshop Dersleri 122
  • WordPress 105
  • Video Dersler 53
  • Illustrator Dersleri 4
  • After Effects Dersleri 4
  • Sizden Gelenler 3

Adobe Download
Tasarım dünyasına detaylı bir giriş yapmak mı istiyorsunuz? Creative Cloud'u şimdi bilgisayarınıza kurun!

Download Adobe Photoshop CC
Download Adobe After Effects CC
Download Adobe Flash Pro CC
Download Adobe Dreamweaver CC
Download Adobe Illustrator CC
Download Adobe InDesign CC

Uyuya mı kaldın?

10 dakikadır bir işlem yapmadın. Yoksa uyuya mı kaldın?
ÖNE ÇIKANLAR
  • Neden Bitmap görselleri Vektörel’e çevirmeliyiz?
  • WordPress SEO Kurulumu ve Ayarları
  • Photoshop ile Fotoğrafları Karakalem Çizime Çevirme
  • Photoshop ile Alevli – Ateşten Yazı Efekti Nasıl Yapılır?