Dreamweaver Kısayollar

Dreamweaverda Kodları hizalama

Edit>>Code>>Apply Source Formating

Kısayoldan Div Oluşturma

.a>.c>.b

ctrl+Altgr+Enter

           <div class="a">

                    <div class="c">

                        <div class="b"></div>

                    </div>

                </div>

Dramweaver Tarayıcıda Önizleme Hatasını Çözmek

Edit > Preferences > Real Time Preview and check the box for "Default to Static Browser Preview".

Dramweaver Telefona Göre Css Yazma

@media only screen and (min-width:200px) and (max-width:479px) 

{

}

Css ile Tablo Satırlarını Farklı Renkte Yapmak: Nth-Child Özelliği

Css yazarken tablo ve liste gibi elementlere ek özellikler vermeniz gerekebilir.
Örneğin bir tablo hazırladınız bu tablonun satırlarının farklı renklerde olmasını istiyorsunuz işte bu gibi durumlarda Nth-Child özelliği imdadınıza yetişiyor.

Kullanımı: Kullanılacak elementten sonra : konularak nth-child(kaçıncı element olduğu belirtilir)

Örneğin: table tr:nth-child(even) {background:red;}

even:Bu stili 1,3,5 gibi tek sayılı satırlara uygula demek, yani yazdığımız css tablonun tek sayılı satırlarına uygulanır.

Diğer Özelliklere Bakalım:

nth-child(odd)
Ör. table tr:nth-child(odd) {background:red;} //Stili tek sayı olanlara uygula

nth-child(even)
Ör. table tr:nth-child(even) {background:red;} //Stili çift sayı olanlara uygula

nth-child(n)
Ör. table tr:nth-child(3) {background:red;} //Stili 3. satıra uygula

nth-child(n+3)
Ör. table tr:nth-child(n+3) {background:red;} //Stili 3 ve 3den sonraki satırlara uygula

nth-child(-n+3)
Ör. table tr:nth-child(-n+3) {background:red;} //Stili ilk 3 satıra uygula

last-child
Ör. table tr:last-child{background:red;} //son satıra uygula

nth-last-child(3)
Ör. table tr:nth-last-child(3){background:red;} //sondan 3. satıra uygula

Power Point Tasarım Şablonları

Sunum yazılımlarında üst sıraları tutan Microsoft Office Powerpoint'te sunumları etkili bir şekilde hazırlamak için gerekli kuralların en önemlilerinden biri görselliktir. Sayfaların zeminine desenler ve renkler uygulamak görselliği değiştirmektedir. Bunu Powerpoint'in menü çubuğundan Tasarım bölümündeki tasarım şablonlarından yaparız. Burada sınırlı sayıda şablon vardır. Fakat internette arattığınızda ücretli ücretsiz bir sürü tasarım bulabilirsiniz. 

Bu yazımda size ücretsiz Powerpoint tasarım şablonu edinmenizi sağlayacak bazı sitelerin adresini vereceğim ve kendi arşivimde bulunan bazı şablonları paylaşacağım. 

Powerpoint şablon dosyalarının uzantıları pot ya da potx dir. Powerpoint'in Tasarım bölmesinden aşağı ok tuşuna tıklayarak çıkan menüden Microsoft Office Online'da başka tasarımlar bulabilirsiniz. Aşağıdaki adresten o sayfaya ulaşabilirsiniz, beğendiğiniz şablonun üzerine geldiğinizde karşıdan yükle'yi tıklayarak indirebilirsiniz.

http://office.microsoft.com/tr-TR/templates/results.aspx?qu=powerpoint&av=zpp

Ayrıca Powerpoint'te Arka Plan Stilleri'nden hazır arka plan efektleri de uygulayarak slaytları renklendirebilirsiniz ya da yine bu bölümden istediğiniz resim ya da fotoğrafı arka plana gömebilirsiniz. Arka Planı Biçimlendir bölümünde doku gibi efektlerin yanında istediğiniz fotoğrafı eklemek için aşağıdaki fotoğraftaki yerden dosya seçilerek bilgisayarınızdan bir resim ya da fotoğraf dosyasını slayta arka plan olarak ekleyebilirsiniz. Yine bu biçimlendirme sayfasında ekleyeceğiniz görselle ilgili konum, hizalama ve saydamlık gibi bazı ayarları da yapabilirsiniz.

Aşağıdaki adreslerden seçmiş olduğum 33 adet şablonu indirebilirsiniz.

https://drive.google.com/open?id=1Rd7tST-3mRxVfaDaRv1xB17a4djlamYU


Ücretsiz şablon (template) sunan bazı siteler;
http://www.powerpointstyles.com/
http://www.free-ppt-templates.com/
http://www.graphicsland.com/powerpoint-templates.aspx
http://www.brainybetty.com/
http://www.freeppttemplates.com/
http://www.soniacoleman.com/templates.htm
http://www.presentationmagazine.com/free_powerpoint_template.htm
http://www.templateswise.com/





Alınıtıdır:http://faskerhat.blogspot.com/2013/12/powerpoint-tasarm-sablonlar.html?utm_campaign=DonanimHaber&utm_medium=referral&utm_source=DonanimHaber

Photoshopta Sağdan Sola Yazı Yazmak

Photoshopta tersten yazı yazmak için yapılması gereken bir iki ayardan bahsedeceğim. Bu nerde işinize yarar örneğin arapça gibi sağdan sola doğru yazılan dillerde yazı yazmak isterseniz çok işinize yarar;)

1-Öncelikle Photoshop menülerinden Edit menüsü altında>>Preferences>>Type yolu izlenir.

2-Choose text engine options bölümü>>Middle Eastern seçeneği seçilir.

3-Type>>Language Options>>East Asian Features seçeneği işaretlenir.

Bu işlemler bittikten sonra imleciniz sağdan sola doğru yazmaya başlar. Fontlardan Arapça bir font seçip yazınızı yazabilirsiniz.

Eski yazma stiline döndürmek için yaptığınız ayarları eski haline döndürmeyi unutmayın...


Faydalı olması dileğimle...

Bloglarda Menü Oluşturma

Bloglarda genel olarak yazıları yada makaleleri daha kolay gruplamak için kategorilere ayrımak gerekir. Bazende bu kategorileri Menüye eklemek isteriz. Bunun için,

Öncelikle Yerleşim Menüsünden Menü ve kategorilerin aktif olduğundan emin olmak gerekir.

İkinci aşama olarak, Blog sayfasında kategorilerden herhangi birine tıklayıp yukarda adres çubuğundan adresi kopyalanır.

• Son aşama olarak Yerleşim Menüsü>>Menü>>Düzenle Seçilir, Harici Bağlantı Ekle seçeneğine tıklanır.  Menü adı yazılarak kopyalanan bağlantı yapıştırılır. İşlem tamamlanmış olur.

Web Sitelerinin Görünümünü Cihaza Göre Yapılandırma

Görünüm, bir web sayfasının mobil cihazda nasıl görüntüleneceğini denetler. Görünüm olmadan, mobil cihazlar sayfayı tipik bir masaüstü ekranı genişliğinde, ekrana sığacak şekilde ölçeklenmiş olarak görüntüler. Bir görünüm ayarlamak, sayfanın farklı cihazlarda genişliği ve ölçeklenmesi konusunda denetim olanağı verir.

Sol: Meta görünümü olmayan bir sayfa.

Sağ: Cihaz genişliğiyle eşleşen görünüme sahip bir sayfa.

Öneriler

Mobil cihazlarda iyi şekilde görüntülenecek biçimde optimize edilmiş sayfaların doküman başlığında width=device-width, initial-scale=1 ifadesini içeren bir meta görünüm olmalıdır.

<meta name=viewport content="width=device-width, initial-scale=1">

Mobil Cihazlarda Masaüstü Sayfaları

Bir sayfada görünüm belirtilmediği zaman, mobil tarayıcılar o sayfayı 800-1024 CSS pikseli arasında bir yedek genişlikaralığında görüntüler. Sayfa ölçeği faktörü, sayfanın ekrana sığacağı şekilde ayarlanır ve kullanıcıların sayfayla etkileşimde bulunabilmek için yakınlaştırma yapmasını gerektirir.

Meta Görünüm Etiketi

Bir meta görünümü etiketi, tarayıcıya sayfanın boyutları ve ölçeklemesi üzerinde nasıl kontrol sağlayacağına ilişkin talimatlar sağlar ve dokümanın başlığına eklenmelidir.

Sabit Genişlikli Görünüm

Görünüm, width=320 veya width=1024 gibi belirli bir genişliğe ayarlanabilir. Bu önerilmese de, sabit boyutlu sayfaların beklendiği gibi görüntülenmesi için yararlı bir geçici önlem olabilir.

Esnek Görünüm

width=device-width meta görünüm değerini kullanmak, sayfaya ekranın genişliğini cihazdan bağımsız piksellerle eşleştirmesi talimatını verir. Bu, sayfanın farklı ekran boyutlarına uyacak biçimde yeniden düzenlenmesini sağlar.

iOS ve Windows Phone gibi bazı tarayıcılar, yatay moda döndürürken sayfanın genişliğini sabit tutar ve ekrana sığdırmak için yeniden düzenleme yerine yakınlaştırma yaptırır. initial-scale=1 özelliğini eklemek, cihaz yönü ne olursa olsun tarayıcılara CSS pikselleri ile cihazdan bağımsız pikseller arasında bir 1:1 ilişkisi oluşturma talimatı verir ve sayfanın tam yatay genişliği kullanmasına olanak sağlar.

Dikkat Edilecek Diğer Noktalar

minimum-scale, maximum-scale, user-scalable kullanmaktan kaçının

Minimum ve maksimum yakınlaştırmayı ayarlamak veya kullanıcının görünümde bütünüyle yakınlaştırma yapabilme özelliğini devre dışı bırakmak mümkündür. Bu seçenekler erişilebilirliği olumsuz şekilde etkiler ve genellikle bunlardan kaçınılmalıdır.

Bu özellikleri kullanmak zorunda kalırsanız da aşağıdaki şekilde kullanabilirsiniz: 

<meta name=viewport content="width=device-width, maximum-scale=0.8">

Kaynaklar:https://developers.google.com/speed/docs/insights/ConfigureViewport?hl=tr

Yardımcı Siteler:

Graphemica: İkonların html koda karşılıklarını bulmak için yararlı bir site
http://graphemica.com/

Pixabay: Yüksek çözünürlüklü fotoğraf veya görsel bulabilmek için faydalı
https://pixabay.com/

Freepik: Afiş logo gibi örnek çalışma bulabileceğiniz bir site
http://www.freepik.com/ 

Font Siteleri: 
100 Free Fonts:http://www.1001freefonts.com/
fonts2u: http://www.fonts2u.com/ 
dafont:http://www.dafont.com/

Templateler

https://www.megafonn.com/web-sitesi-nasil-yapilir-tum-asamalari/
https://www.c-sharpcorner.com/
https://cssdeck.com/
https://bootsnipp.com/snippets/92xNm
https://codequs.com/p/Hk6T8-mB4
https://musefree.com/
https://www.bootdey.com/s
https://www.bootdey.com/snippets/view/single-advisor-profile
https://webdevresources.info/css
https://www.html5xcss3.com/responsive-menus-tutorials
https://csshint.com/css-dropdown-menu/
https://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
http://demo.html5xcss3.com/demo.php?url=www.script-tutorials.com/demos/415/index.html
https://codepen.io/ahmedhosna95/pen/RJeYjg
https://codepen.io/Mohamed-Ayman/pen/WyYGPa
https://bootsnipp.com/snippets/bXZA2
https://freefrontend.com/css-menu/
https://quazar.starfirewebdesign.com/
https://colorlib.com/wp/html-social-buttons-templates/
https://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
https://www.youtube.com/watch?v=rk-IuYOyfnc&ab_channel=Onlinewebustaad
https://www.jquery-az.com/css/demo.php?ex=132.0_1
https://www.html5xcss3.com/responsive-menus-tutorials
https://codepen.io/Mohamed-Ayman/pen/WyYGPa
https://codepen.io/nolasia/pen/OwxJaB
https://css-tricks.com/the-shapes-of-css/
https://sharkcoder.com/visual/shapes
https://enjoycss.com/

https://www.xml-sitemaps.com/

Favori Yazı Fontlarım

Sevdiğim Yazı Tipleri

Josefin Sans
Gruppo
Philosopher
Syncopate
Roboto
Play
PT Sans
Cuprum
Platform One
Ceria Lebaran
Salzburg

HurmeGeometricSans1 

Muli

Mulish

PoiretOne-Regular

Poppins

Raleway

Charm-Regular, El yazısı

SignPainter-HouseScript, El yazısı

TrajanPro (Afişler İçin)

Sitede Kullandıklarım:
Başlıklarda:Philosopher
Yazılarda:Play

İllustratorda Çalışırken En Çok Kullandığım Araçlar ve Kısayollar:

YENİ DOSYA AÇMA

*300dpi, CMYK, A4 Yatay olarak dosya seçeneklerimi kullanıyorum.

SEÇME

• Seçtiğimiz şekle benzer şekilleri seçmek:
  Önce, şekillerden birini seçeriz,
  Sonra, Select Menüsü>>Same>>Apperance  yolunu izleriz, tüm benzer şekilleri seçer

ŞEKİL VERME

• Bütün çizgileri gösterme: Ctrl+Y
• Şekillerimizi birleştirmek istersek:
  Window>>Pathfinder yolunu izleriz burdaki paneldeki özellikleri kullanırız.
• Ctrl +Ü: şekilleri bir üste taşır, 
• Ctrl+Shift+Ü şekilleri en üste taşır
• Ctrl+Ğ: şekilleri bir alta taşır
• Ctrl+Shift +Ğ şekilleri en üste taşır
• Ctrl +2 seçilen katmanı kilitler
• Ctrl+Alt+2 kilidi kaldırır.

YAZI

• Yazıyı vektöre çevirme: Sağ tık>>Create Outlines yada Ctrl+Shift+O
  
• Yazıdaki harfleri ayırma: Sağ tık>> Ungroup
  Eğer ungroupla ayrılmamışsa: Sağ tık>> Relase Compund Path

RESİM

• Resmi vektöre çevirmek için, resmi seçtikten sonra; Object>>İmage Trace>>Make And Expand yolunu izleriz.

İlustrator konusunda kendinizi geliştirmek istiyorsanız kaynak tavsiyem:
https://www.youtube.com/watch?v=D4cNtsIuMAY&index=12&list=PLK8wbkvLOBVQ_0Xcbn_WvlRbj4EZh6OTb
12. video ve sonrasında yararlı bilgiler mevcut

Yazı Karakterini Türkçeleştirme

Merhabalar yeni bir yazı ile karşınızdayım,

Bu yazımda yazı fontlarına Türkçe karakter ekleme işleminden bahsedeceğim.

Çalışmalarımızda kullanmak için değişik yazı fontlarına ihtiyaç duyarız. Çeşitli font sitelerinden indirebileceğimiz bu fontlarda bazen Türkçe karakter sıkıntısı yaşanmaktadır.

Bu sorunun bir çözümü var, var olan karakter ile Türkçe karakterler oluşturabiliriz.

Bunu için ben  Font Creator isimli programı kullanıyorum. Bu programı indirdikten sonra yapmanız gerekenleri aşağıdaki videomda anlattım.

Faydalı olması dileğimle hoşçakalın :)

Daire Etrafına Yazı Yazmak

Daire etrafına yazı yazma çalışması ile ilgili hazırlık süreci şu aşamalardan oluşuyor:

1.  Adobe Illustrator programında yeni bir doküman açarak çalışmaya başladım.
Boyutları: w:1000px h:1000px Çözünürlük:300 ppi Color mode:Rgb olarak belirledim.

2.Önce daire çizdim ve içine yazıları yazdım. Bu işlemi yapmak için şu videoadan yararlandım:

3.Sonrada içine yazıları yazıp son şeklini verdim. Bu aşamada en zorlayan kısım çizim yapmak oldu.
Bunu yapmak için ise hazır resimleri (örneğin ok işareti) alıp vektöre çevirdim ve diğer ögelerle birleştirdim.

Resmi vektöre çevirme konusunda yararlandığım kaynak:

Keyifli Bloglar...

Yeni Logo Çalışmam

Merhabalar,

Bu çalışmam bi arkadaşım için hazırladığım örnek bir logo çalışması oldu.

Logoya gelecek olursak;

Genel olarak logoyu hazırlarken sadelik ve algıda seçicilik üzerinde durdum.

İlk olarak renkleri belirlemekle başladım.

Bu sebeple sadeliği, asaleti temsil eden “siyah” ve tazeliği, canlılığı anlatan “yeşil” renklerini ana renklerimiz olarak belirledik.

Sonraki aşama yazı fontunu belirlemek oldu, yine sade ve akılda kalıcı bir font seçtim. Kullandığım fontun adı ise: PlatformOne

Bu bilgiler ışığında logoyu hazırladım… ve işte sonuç:

Umarım beğenmişsinizdir...
Bir sonraki yazıda görüşmek üzere..

Logo Hazırlarken Dikkat Edilmesi Gerekenler:

1. Grafik tasarımın çoğaltılabilir öğelerinin başında yer alan logo tasarımı, her yerde, her türlü teknikte çoğaltılabilir olmalıdır. Serigrafi, yazıcı çıktısı, folyo kesim, kabartma, matbaa uygulamaları, dijital baskılar, televizyon ve internet… Logo tasarımı kullanılacak dağıtım araçlarına mutlak suretle uyum sağlamalı ve aslını bozmamalıdır. Bunun için logo kesinlikle vektörel olmadır.

2. Logo tasarımı yapılırken yapılacak logonun neyi anlatması gerektiği, neyi temsil edeceği planlanmalı ona göre eskizler hazırlanmalıdır.

3. Sonraki adım eskiz çalışmalardır. Eskiz çalışmalarda çizimler, çıkış noktaları somutlaştırılarak çizimler oluşturulur, bu çizimlerin hoşa giden yerleri kullanılır.. Tasarımlar oluşturulmaya çalışılır.

4. Ana form oluşturulduktan sonra oluşturulan formlar vektörel hale getirilerek renk seçimleri yapılır. Renk seçimleri markanın amacına göre değişebilir. Satış artırma amaçlı kırmızı, güven sağlamak amaçlı mavi, hareket ve dinamiklik sağlamak amaçlı turuncu tercih edilebilir.

5. Tasarım yapıldıktan sonra uygun tipografi seçilerek, yada özel bir tipografi tasarlanarak logoyla uyumu sağlanır. 

Font seçiminde olabildiğince uygulanabilir, okunmayı akılda kalıcılığı artıran, tırnaksız (sans serif) fontlar kullanılmalı. Çünkü tırnaksız fontlar (aril, helvatica vb.) özellikle okunma esnasında harfleri vurgular ve markayı akılda tutar. Tırnaklı fontlar (times new roman vb.) kitap, gazete gibi yazıların devamlılık sağladığı metinlerde kullanılmalı.

Uyulması gereken ölçüler
Logo tasarımlarında belli bir ölçü sınırı yoktur. Bunun yerine oran orantı kullanılarak X yada Y değerleriyle logoyu geometrik yapılarda çözümlemek daha doğru olur. Örneğin 1/3 -1/2 gibi yazının logoya, logonun yüksekliğinin genişliğe oranı.. Önemli olan logonun her alanda güzel ve kararlı durmasını sağlamaktır.

Logo tasarımında başarı için altın kurallar
Bir logonun öncelikle negatif – pozitif uygulamasının yapılması gerekir. Logo sadece siyah, yada sadece beyaz olduğunda da özelliğini kaybetmemeli! Renk geçişlerine degradelere girmeden logoyu yalın haliyle tasarlamak gerekir. Daha sonra ihtiyaç duyulduğunda efektlendirilebilir, yada üç boyutlu hale getirilebilir. Ama logonun özü en sade hali vektörel , negatif-pozitif uyarlanabilecek hali olmalıdır.

Logo hangi programlar ile tasarlanır?
Adobe Illustrator; vektörel Macromedia Freehand; vektörel Adobe Photoshop; Pixel tabanlı, Path özelliği uygulanırsa vektörel Corel; vektörel. Tavsiye edebileceğim programlardır.

Logo nasıl değerlendirilmeli?
Logo değerlendirmelerinde şu kriterler mutlak süretle sorgulanmalıdır.
• Sadelik / yeterince sade mi?
• Anlaşılabilirlik / bakıldığında ne olduğu, neyi temsil ettiği anlaşılıyor mu?
• Okunurluk / marka kafa karışıklığına sebep olmadan düzgün okunabiliyor mu?
• Markayı temsili / ürünü veya hizmeti hatırlatıyor mu?
• Özgünlük / tasarım yeterince farklı ve diğerlerinden ayrı mı?
• Uygulanabilirlik / basılı ve görsel metaryallerde uygulama problemi oluşturur mu?