http___proftm.com_temizlik-stil-is-duzeni.html_1.xml
1.1 2.1 3.1 3.2 4.1 5.1 6.1 7.1 8.1 9.1 9.2 10.1 10.2 11.1 12.1 12.2 13.1 14.1 15.1 16.1 16.2 17.1 18.1 18.2 19.1 20.1 21.1 22.1 23.1 24.1 24.2 25.1 26.1 27.1 28.1 28.2 29.1 29.2 30.1 31.1 32.1 32.2 32.3 33.1 33.2 33.3 34.1 35.1 35.2 36.1 37.1 37.2 38.1 39.1 40.1 41.1 42.1 43.1 43.2 44.1 44.2 44.3 45.1 46.1 47.1 48.1 48.2 49.1 49.2 50.1 51.1 52.1 53.1 53.2 54.1 55.1 56.1 57.1 58.1 58.2 59.1 60.1 61.1 61.2 62.1 63.1 64.1
May 20th, 2010 in Photoshop Tutorials by Richard Carpenter Learn To Create A Photography Style Web Layout Hello everybody, welcome to another tutorial by HV-Designs. In this tutorial I’ll be walking your through the process of creating a photography/portfolio style web layout. What We’ll Be Creating Click image for bigger version. Resources Used In This Tutorial Lets Get Started Create a new document 1200 x 1200 pixels then select the gradient tool with a radial gradient. Once you’ve selected the gradient tool change your foreground and background colors. Change your foreground color to #eae9e9 and background color to #d7d7d7. Now drag the radial gradient from the center of the top of your canvas, dragging down about a quarter of the way down your canvas. Once your happy with the gradient apply some noise to the background by going to “Filter > Noise > Add Noise”. Creating The Header Select the rectangular marquee tool then make a selection about 240 pixels in height that spans the width of your canvas. Once you’ve made the selection shift it down about 50 pixels from the top of your canvas. Fill your selection with any color then add the following layer styles using the following settings. You should have something like this. Creating The Header Custom Pattern Create a new document 14 x 16 pixels with a transparent background. Select the magnifying glass and zoom in 3200%, select the elliptical marquee tool and create two circles as shown in the image below. Once you’ve created the two circles go to “Edit > Define Pattern”, give your pattern a name then close the document. Load a selection around your header rectangle by selecting the header layer and going to “Select > Load Selection”. Create a new layer above your header layer then fill the selection with your pattern. Select your pattern layer then add the following layer styles with the following settings. Finally set the pattern layers opacity to 20%, you should have something like this. Creating The Title Select the type tool then type out your website title on the left side of the header. Once you’ve added your website title add the following layer styles to your text layer. On the left side of the title text add the camera icon from the “Longhorn R2 Icon Pack“. You should have something like this. Creating The Navigation In the top right corner add your navigation using the type tool. Once you’ve added your text add the following layer styles to your text navigation layer. At the beginning of your navigation add a new text layer labeled “Homepage or Home”. Color the text white. Underneath the text layer “Home” add a rounded rectangle using the rounded rectangle tool. Add the following layer styles to your rounded rectangle. You should have something like this. Creating The Login Panel Select the rounded rectangle tool with a radius of 10px (Default Radius). Drag out a small rectangle on the right side of the header area. Once you’ve added the rectangle set layers opacity to 40%. Select the rectangular marquee tool then create 3 boxes inside the login panel. Create the first two boxes the same size, these boxes will be our login and password fields. Finally create the third box alot smaller, this box will be our login button. Add the following layer styles to your 3 rectangles. Finish off the login box by adding the labels for your rectangles and login button. You should have something like this. Creating The Gallery Download the “Nikon D40 Iphoto Icon” and place it underneath the header on the left. To the right of the icon add the words “From The Gallery” with a small slogan. Now add the following layer styles to your text so it matches the image above. Underneath the text “From The Gallery” add a couple of circles to simulate a jQuery like slider, use the circle tool or the elliptical marquee tool for the circles. Using the rounded rectangle tool create 4 rectangles, place the 4 rectangles in a line next to the gallery text and icon. Add the following layer styles to each one of the rectangles. Your rectangles should now be transformed into something like this. Now load a selection around one of your rectangles, to load a selection go to “Select > Load Selection”. Once you’ve loaded the selection contract the selection by 10px “Select > Modify > Contract”. Open up your desired image to put inside the gallery then copy it to the clipboard. Paste your image inside the selection by going to “Edit > Paste Into”. Resize and move your image into place inside the selection then add a stroke and inner shadow using the settings below. You should have something like this. Finish off the gallery images by adding a simple shine for that glassy effect. Creating The Divider Using the rectangular marquee tool create two 1px lines on top of each other, color the top line in black #00000 and the bottom line in white #ffffff. The line should be the width of your layout. Now set the layers blend mode to “Overlay” then add a layer mask. Select the gradient tool with a reflected gradient, drag the gradient from the middle of the lines outwards to either the left or the right canvas. Creating The Sidebar Select the rounded rectangle tool then make a selection underneath the divider. Fill the rectangle with any color then add the following layer styles. Right click your rectangle layer and go to “Convert To Smart Object”. Once you’ve converted your layer add a layer mask then drag a linear gradient from the bottom of the rectangle upwards. Using the type tool add some content into your sidebar rectangle. Creating The Content There’s not alot to the content area really only a fancy title styled in the same way as our gallery, then underneath i’ve added a couple of paragraphs of dummy text. Creating The Footer Duplicate your header and dots pattern then drag it down to the bottom of your canvas. Resize the duplicated header and dots pattern to suit your footer size. Change the color overlay of the dots pattern to #8d8d8d then change the gradient overlay of the duplicated header layer to the following. Finally add your footer information to your footer. That’s it all done hope you enjoyed this tutorial. Look forward to all your comments. Be Part Of The Community! Become part of the hv-designs community. Subscribe Via RSS or Follow Us On Twitter.
1.1 2.1 3.1 4.1 5.1 6.1 7.1 8.1 9.1 10.1 11.1 12.1 13.1 14.1 15.1 16.1 17.1 18.1 19.1 20.1 21.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 35.1 36.1 37.1 38.1 39.1 40.1 41.1 42.1 43.1 44.1 45.1 46.1 47.1 48.1
Serin bir mavi tema ile şık bir iş düzeni oluşturmak için bugünün öğretici ben nasıl gösteriyor olacak. Biz oluşturma Be? Arka Plan Oluşturma Beyaz bir arka plan ile yeni bir (Ctrl + N) belge 1200 x 1140px oluşturun. “Rectangular Marquee Tool” (M) sonra bir seçim yapmak bir çapraz tuvalin üst yarısında seçin. Bir kere, (G) # 000000 siyah renk kullanarak doldurmak, seçim yarattık. Bir kez seçim aşağıdaki ayarları kullanarak bir “Gradient Overlay” doldurmak ettik. Sonra, “Rectangular Marquee Tool” (M), yine sadece bu sefer ilk dikdörtgen seçimi yarım boyutunu seçin, (G) siyah renk seçimi ile # 000000 doldurun. Sonra seçimi, “Filter> Render> Lens Flare” gidin, yeni bir dikdörtgenin sol üst objektif parlamasını dolu olmuştur. Objektif parlamasını katman karışım modunu “Screen” olarak ayarlamak Şimdi eklenmiştir. Böyle bir şey olması gerekir. Kaynak listeden bazı bulut fırçalar indirin. Sonra, dikdörtgenin mavi kısmı bazı bulutlar eklemek dikdörtgen bittiği yerde gizlemek için objektif parlama beyaz çizgi üzerinde bazı ağır bulutlar ekleyin. Dikdörtgenin kenar gizleme başarılı değilseniz, bir katman maskesi kullanabilirsiniz. Bu başlık bölümünün geri kalanı tarafından karşılanacaktır olarak ortasında kenarına hakkında çok fazla endişelenmeyin. Özel Alan Oluşturma 20px hakkında bir yarıçap “Rounded Rectangle Tool” (U) seçin. Web sitesi başlık için oda iyi bir miktar bırakarak bir dikdörtgen sürükleyin. Biz şimdi yeniden seçin “Rounded Rectangle Tool” (U), sonra iki yeni dikdörtgen, üstte ve altta biri dışarı sürükleyin Bunu yapmak için, dikdörtgen değiştirmeniz gerekir. Biraz daha üst kısmında bir küçük, altta dikdörtgen olun. Dikdörtgen şekil katmanı iki yeni dikdörtgenler sürüklemeden önce Shift tuşuna basılı tutun ekler emin olmak için. Iki yeni dikdörtgenler üzerinde köşeleri kesmek gerekir. “Pen Tool” üst “Şekil Alanından Çıkart” seçeneği seçin, sonra değiştirin. Üst ve alt dikdörtgen kapalı yuvarlak köşe Kes, daha sonra küçük bir üçgen çizmek sadece şekil katmanı eklemek için Shift tuşuna basılı tutun. Köşeleri kesilmiş Şimdi indirmek ve mavi soyut duvar kağıdı açın. Duvar kağıdı panoya kopyalayın, sonra biz sadece modifiye özellikli dikdörtgen bir seçim yükleyin. Bir seçim yüklemek için “Layer> Load Selection” katmanı seçin. Bir kere gitmek seçimi yüklenmiş oldu “Düzen> Özel Yapıştır> Yapıştır ‘”. Duvar kağıdı dikdörtgen şeklin içinde yapıştırılan ve taşınır ve dikdörtgen içinde dönüştürülmüş gerekir. Sonra yapıştır özel komut çalıştı durumda, artık eski dikdörtgen şekli gizleyebilirsiniz. Sonra aşağıdaki katman stilleri eklemek gibi çiçek deseni şeklin sol üst köşesinde bu yüzden duvar kağıdı yerleştirin. Böyle bir şey olması gerekir. Üstbilgi Alan Bazı Yazı Lens flare üst düzeni üzerinde üst kısmında web sitesi başlık eklemek. I kullanılan yazı tipi verdana ve “Göz Damlalık Tool” (I) kullanarak duvar kağıdı içinde mavi renk seçildi. Sonraki başlık sağ tarafında bazı metin eklemek, bu şirketin telefon numarası varsa tanıtımı için iyi bir yerdir. Sonra özellikli alan bazı metin içinde, cesur, iyi ekleyin. Gezinti Oluşturma Sonra sağ üst çıkan bir dikdörtgen sürükleyin özellikli bir alan arkasında bir katman üzerinde “Rounded Rectangle Tool” (U) seçin, dikdörtgenin sağ tarafında özellikli alana sahip düzgün bir şekilde sıraya olmalıdır. Sonra dikdörtgen aşağıdaki katman stilleri eklemek yaratılmıştır. Inside navigasyon dikdörtgen bir metin gezinti ekleyin. Özel Alan Terbiye Küçük bir alanda özellikli alanı altında bize özelliği basit bir kişiyi daha eklemek. Şirketin irtibata hakkında bir dikdörtgen ve bir cümle ile başlayın. Küçük dikdörtgen aşağıdaki katman stilleri ekleyin. Böyle bir şey olması gerekir. Son olarak özellikli alanının sağ tarafında “Elips Aracı” (U) kullanarak 4 küçük daireler ekleyin. Bu 4 daire özellikli alan, alan özellikli bir jquery kaydırıcı türü ne bazı olduğunu simülasyonu. Ana İçerik Alan Oluşturma Ana içerik alanına 3 kutu içeriği ve küçük bir galeri ile dolu oluşur. 3 içerik kutuları ile başlayarak, “Rounded Rectangle Tool” (U) seçin 3 dikdörtgenlerin her biri için aşağıdaki katman stilleri ekleyin. Böyle bir şey olması gerekir. Istediğiniz içerik ile 3 kutuları doldurun, ben bir karşılama kutusu, hizmet kutusu ve bazı müşteri referansları için tercih ettik. Her kutunun başlıkları gri bir gölge ve mavi bir gölge web sitesi başlığı kullanmak, bunu yaparken bazı renk düzenini sadece bir mat renk, çoğunlukla gri veya siyah yerine getirmek için iyi bir yoldur. Galeri oluşturma “Rectangle Tool” (U) kullanarak 4 dikdörtgenler oluşturma, (G) rengi gri ile her dikdörtgen # f1f1f1 doldurun. Ilk dikdörtgenin etrafında bir seçim yükleyin “Layer> Load Selection” sonra “i seçin> Modify> Contract” etrafında 5-10 piksel sözleşme seçimi. Kopyalama ve “Düzen> Özel Yapıştır> Yapıştır” olacak dikdörtgenin içine galeri görüntülerin bir yapıştırın. Önümüzdeki 3 dikdörtgenler için bu adımları yineleyin. Böyle bir şey ile bitmelidir. Altbilgi oluşturma Sonra tuvalin alt Şekli taşımak özellikli şekli çoğaltın. Şekli yatay çevirmek için “> Transform> Flip Horizontal Düzenle” gidin. İçeride flep bir çeşit dikdörtgen, indirme ve zarif sosyal simgeleri paketi bazı sosyal simgeler ekleyin. İçinde altbilgi alanına geri kalanı telif hakkı bilgileri ekleyebilirsiniz. Sonuç Bu eğitimde yer ayırdığınız için teşekkürler, Bu öğretici bitirmek için bazı sonuçları görmek isteriz.Sitemizde onları göndermek için çekinmeyin Facebook Hayran Sayfası .