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

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 Zıt Tonlama

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

Paylaş
Share on Facebook Share
Share on TwitterTweet
Share on Pinterest Share
Share on LinkedIn Share
Send email Mail
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 Denize Yansıyan Işık Efekti
  • CSS ile Renkli ve Görsel Geçişli Menü
  • Photoshop ile Yüzeylerde Kan Efekti
  • Roots WordPress HTML5 Tema
  • Photoshop ile Dragan Efekti
  • Haftanın İlham Kaynakları #16
  • Photoshop ile Renkli Arka Plan ve Balon Yazı
  • Photoshop ile Yüze Sıçrayan Boya Efekti
  • CSS3 ve jQuery ile Google Play Tab
  • Photoshop ile Görsellerinizi Sıkıştırarak Web Sayfanızın Açılış Hızını Arttırın

Popüler Örnekler

  • Ambilight ile Bootstrap Slider Kullanımı 17045
  • Sitenize Haber ve Duyuru Akışı Ekleyin 12732
  • Yukarı Scroll Edildiğinde Gözüken Header 12614
  • Material Design Öne Çıkarılmış Menü Tasarımı 11535
  • Mobil Sitenize WhatsApp ve Diğer Sosyal Paylaşım Linkleri Ekleyin 10993
  • Sitenize Kolayca Slider Ekleyin 10853
  • Sadece CSS ile Slider Yapımı 9725
  • CSS ve jQuery ile Dönen Menü 9555
  • Fareyle Birlikte Hareket Eden Arkaplan Resmi 9227
  • jQuery ile Scroll ve Arkaplan İlişkisi 7766

Kategoriler

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

Bağlantılar

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

Kategoriler

  • Tasarım Unsurları 392
  • Öne Çıkanlar 106
  • Photoshop Dersleri 123
  • WordPress 106
  • 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
  • WordPress Kullanıcılarına .htaccess İpuçları
  • LESS nedir? Nasıl yazılır?
  • 10 Ücretsiz Material Design HTML Template
  • CSS ile Navigasyon Menü Tasarlayalım