Buat Website Racing

We are going to create a racing website using Photoshop and a little imagination, along with a few stock images. Kita akan membuat website balap menggunakan Photoshop dan sedikit imajinasi, bersama dengan beberapa stok foto. In this tutorial we are going to learn to create an easy glossy type, quick color correction, several visual elements and the structure of a website. Dalam tutorial ini kita akan belajar menciptakan sebuah tipe glossy yang mudah, cepat koreksi warna, beberapa elemen visual dan struktur dari sebuah situs web.
Remember, being organized is really important to not going crazy with all the layers. Ingat, menjadi teratur sangat penting untuk tidak akan gila dengan semua lapisan. I'll mention creating folders most of the time, but if you feel like something should be in a folder, put it there. Saya akan menyebutkan menciptakan folder sebagian besar waktu, tetapi jika Anda merasa seperti sesuatu harus dalam folder, menaruhnya di sana. Also, label your layers also, so you know what is what. Juga, label lapisan Anda juga, sehingga Anda tahu apa yang apa. It will give you less of a headache in the long run. Ini akan memberi Anda kurang dari sakit kepala dalam jangka panjang.

What we are going to need: Apa yang kita akan membutuhkan:

Racing image Balapan gambar
Racecar image Gambar mobil balap
Tire image Ban gambar
Carbon Fiber Pattern Serat Karbon Pola

Step 1 Langkah 1

Open up a new 1200x1200px document in Photoshop. Buka dokumen baru di Photoshop 1200x1200px.
Now go to View and make sure that Snap is checked. Sekarang pergi ke Lihat dan pastikan bahwa Snap diperiksa. Click and drag the left ruler so that a guide comes out and bring it to the middle of the document. Klik dan tarik penguasa kiri sehingga panduan keluar dan membawanya ke tengah-tengah dokumen. It should snap in place at the middle. Ini harus jepret di tempat di tengah.

Step 2 Langkah 2

Create a new layer (Ctrl+Shift+N) and click on the Square Marquee Tool (M). Buat layer baru (Ctrl + Shift + N) dan klik pada Marquee Tool Square (M). In the options bar, change Normal to Fixed Size. Pada options bar, ubah Normal untuk Ukuran Tetap. Change the width to 960px and the height to 100px. Mengubah lebar untuk 960px dan tinggi ke 100px. Click onto the document and fill the box that comes up with black. Klik ke dokumen dan mengisi kotak yang muncul dengan warna hitam.
Bring up 2 guides, and move one to the left side of the box and the other one to the right side. Membawa 2 panduan, dan bergerak satu ke sisi kiri kotak dan yang lain ke sisi kanan. The guides should snap in place on the edges of the box. Pemandu harus jepret di tempat di tepi kotak. This will be the width of our website. Ini akan menjadi lebar dari website kami.

Step 3 Langkah 3

Our left main content box is going to be 640px, so repeat step 2 but change the width to 640px. Kotak konten kiri utama kami adalah akan menjadi 640px, jadi ulangi langkah 2 tetapi mengubah lebar untuk 640px.
Do this for our sidebar also, which will be 300px wide. Lakukan ini untuk sidebar kita juga, yang akan 300px lebar. Put the right side of the box on the right guide. Masukan sisi kanan kotak pada panduan yang tepat. This will give us a 20px gap in between the content box and the sidebar. Ini akan memberi kita celah 20px di antara kotak konten dan sidebar.
Click and drag those black box layers to the trashcan at the bottom of the layers palette. Klik dan drag kotak hitam layer tersebut ke tempat sampah di bagian bawah palet layer.

Step 4 Langkah 4

Create a new folder by going to Layer>New>Layer Set and call it “Header”. Buat folder baru dengan pergi ke Set Layer>> New Layer dan menyebutnya "Header". Inside the folder, create a new layer (Ctrl+Shift+N) called “Top Header”. Di dalam folder, membuat layer baru (Ctrl + Shift + N) disebut "Header Top".
Now create a new box with a fixed size of 1200x65px, move it to the top of our document and fill it in with #333333. Sekarang membuat kotak baru dengan ukuran tetap 1200x65px, memindahkannya ke bagian atas dokumen kita dan mengisinya dengan # 333333.
We are going to add an Inner Shadow to our box so click on the Layer Styles icon and click on Inner Shadow. Kita akan menambahkan Inner Shadow ke kotak kita jadi klik pada ikon Layer Styles dan klik pada Inner Shadow.


Now that we have our inner shadow, you may notice it goes around the sides (which we wouldn't want if we were to code it). Sekarang kita memiliki bayangan batin kita, Anda mungkin melihat hal itu terjadi di sekitar sisi (yang kita tidak ingin jika kita kode itu). Using Ctrl+T we are going to stretch the box. Menggunakan Ctrl + T kita akan meregangkan kotak. Hold down Alt and click and drag one of the side anchors out. Tahan Alt dan klik dan tarik salah satu jangkar sisi keluar.

Step 5 Langkah 5

The next thing we are going to do is create another fixed size box, this time it will be 1200x5px. Hal berikutnya kita akan lakukan adalah membuat kotak lain ukuran tetap, kali ini akan 1200x5px. Fill it with black. Mengisinya dengan hitam. Move the box to the top of the document. Memindahkan kotak ke bagian atas dokumen. Create another box the same size and move it so the bottom is lined up with the bottom of the gray box. Buat kotak lain ukuran yang sama dan memindahkannya sehingga bagian bawah berbaris dengan bagian bawah kotak abu-abu.

Step 6 Langkah 6

We are going to add some layer styles to these boxes, so go to click on the same icon we went to for the inner shadow, but this time click on Gradient Overlay. Kita akan menambahkan beberapa gaya layer untuk kotak-kotak ini, jadi pergi ke klik pada ikon yang sama kami pergi ke untuk bayangan batin, tapi ini klik waktu Gradient Overlay. This should give those 1200x5px boxes a 3D look. Hal ini akan memberikan kotak-kotak 1200x5px melihat 3D.

Step 7 Langkah 7

Lets add our name to the headline. Mari kita tambahkan nama kami untuk judul. I am using ITC Franklin Gothic Heavy Italic for my font. Saya menggunakan ITC Franklin Gothic Miring Berat untuk font saya. Change the color to #FFCC00 and add a Drop Shadow, Bevel and Emboss, and a Gradient Overlay from the Layer Styles. Ubah warna ke # FFCC00 dan menambahkan Drop Shadow, Bevel dan Emboss, dan Gradient Overlay dari Layer Styles. This will give our text a shiny metallic look. Ini akan memberikan teks kita tampilan metalik mengkilap.



Make sure the text is on the left guide. Pastikan teks pada panduan kiri.

Step 8 Langkah 8

For the navigation part of our header, make a new folder called “Nav” and write out “HOME ABOUT HISTORY SCHEDULE SPONSORS”. Untuk bagian navigasi header kita, membuat folder baru bernama "nav" dan tuliskan "HOME TENTANG SPONSOR JADWAL SEJARAH". Make “HOME” the same yellow as the name on the left (this will be our active button), and the rest will be #CCCCCC. Membuat "HOME" kuning sama dengan nama di sebelah kiri (tombol ini akan aktif kami), dan sisanya akan # cccccc. This text should have the same layer styles as the name on the left (Step 7), and should have a font size of 16pt. Teks ini harus memiliki gaya lapisan sama dengan nama di sebelah kiri (Langkah 7), dan harus memiliki ukuran font 16pt.
Make sure “SPONSORS” lines up on the right guide. Pastikan "SPONSOR" baris di panduan yang tepat.

Step 9 Langkah 9

We are going to make lines in between each button, so first create a new layer. Kami akan membuat garis di antara setiap tombol, jadi pertama buat layer baru. Using the fixed size, create a box 1px wide and 30px tall and fill it with black. Menggunakan ukuran yang tetap, membuat kotak 1px lebar dan tinggi 30px dan mengisinya dengan hitam. Move the marquee box over one pixel to the right and fill with #666666. Pindahkan kotak tenda lebih dari satu pixel ke kanan dan isi dengan # 666666. These two boxes should be on the same layer. Kedua kotak harus pada lapisan yang sama. Make sure the lines line up so the center is at about the center of the text. Pastikan garis berbaris sehingga pusat adalah di sekitar pusat dari teks.

Step 10 Langkah 10

Click on the Add vector mask icon at the bottom of the layers palette. Klik pada ikon vector mask Tambahkan di bagian bawah palet layer. Click on the Brush Tool (B) and get a 20px brush with 0% hardness. Klik pada Brush Tool (B) dan mendapatkan sikat 20px dengan kekerasan 0%. Now, put the middle of the circle over the top end of the black/gray line we made and click, do this with the bottom of the line also. Sekarang, menempatkan tengah lingkaran di ujung atas garis hitam / abu-abu kami buat dan klik, lakukan ini dengan garis bawah juga. This should make the line fade out. Hal ini seharusnya membuat garis memudar keluar.

Duplicate the line with Ctrl+J so there is one in between each button. Gandakan baris dengan Ctrl + J sehingga ada satu di antara setiap tombol.

Step 11 Langkah 11

Now, open up the car image . Sekarang, membuka gambar mobil . We are going to adjust the red parts of the car so they are yellow and go with the website better. Kami akan menyesuaikan bagian-bagian merah dari mobil sehingga mereka kuning dan pergi dengan situs web yang lebih baik. Go to Image>Adjustment>Replace Color and click on the red part of the car. Pergi ke Image> Adjustment> Ganti Warna dan klik pada bagian merah dari mobil. Change the Hue to +40 and the Saturation to +30. Mengubah Hue dan Saturasi sampai +40 ke +30. If all of the yellow spots on the car don't change to, hold down Shift and click on those spots. Jika semua titik-titik kuning pada mobil tidak berubah untuk, tahan tombol Shift dan klik pada titik-titik.

Step 12 Langkah 12

Now use the pen tool to cut out the car and bring it into our website document. Sekarang menggunakan alat pena untuk memotong keluar dari mobil dan membawanya ke dalam dokumen website kami. If you don't know how to use the pen tool, psd tuts + has a nice guide to it. Jika Anda tidak tahu bagaimana menggunakan alat pena, PSD Tuts + memiliki panduan yang bagus untuk itu.

Step 13 Langkah 13

We are going to adjust the size and angle of the car. Kami akan menyesuaikan ukuran dan sudut mobil. So change the size percentage to 34% and the angle to -58 degrees. Jadi mengubah persentase ukuran sampai 34% dan sudut untuk -58 derajat. Create a new folder above the top header layers called “Car” and put the car layer in it. Buat folder baru di atas lapisan header disebut "Mobil" dan menempatkan lapisan mobil di dalamnya.

Step 14 Langkah 14

Duplicate the car layer with Ctrl+J. Gandakan layer mobil dengan Ctrl + J. Ctrl and click on the layer to bring up a marquee around it. Ctrl dan klik pada layer untuk membawa sebuah tenda di sekitarnya. Fill the marquee shape with black and move the black layer behind the car layer. Isi bentuk tenda dengan warna hitam dan memindahkan lapisan hitam di balik lapisan mobil. Now we are going to blur the black layer to give the car a shadow. Sekarang kita akan mengaburkan lapisan hitam untuk memberikan mobil bayangan. So, go into Filter>Blur>Gaussian Blur and change the radius to 6px. Jadi, pergi ke Filter> Blur> Gaussian Blur dan mengubah radiusnya ke 6px.

Now move the shadow layer down 5 times. Sekarang pindahkan layer bayangan turun 5 kali.

Step 15 Langkah 15

Now we need to mask out some of the unnatural shadows like the ones around the spoiler. Sekarang kita perlu untuk menutupi beberapa dari bayang-bayang yang tidak wajar seperti yang di spoiler.
Click on the mask icon (second icon on the bottom of the layers palette). Klik pada ikon topeng (ikon kedua di bagian bawah palet layer). Now using a round black brush with 0% hardness, with a size somewhere around 70px start painting away the shadows we don't want. Sekarang menggunakan sikat bulat hitam dengan kekerasan 0%, dengan ukuran 70px suatu tempat di sekitar mulai melukis pergi bayangan kita tidak inginkan.

Step 16 Langkah 16

Move the car up so it overlaps the header at the very top and goes over the guide on the left, so you have something like what is shown below. Memindahkan mobil ke atas sehingga tumpang tindih header di bagian paling atas dan berjalan di atas buku di sebelah kiri, sehingga Anda memiliki sesuatu seperti apa yang ditampilkan di bawah ini. This will give our website a little bit of a different look. Hal ini akan memberikan website kami sedikit tampilan yang berbeda.

Step 17 Langkah 17

We are going to create a box behind the car that will go across the width of the website. Kita akan membuat kotak di belakang mobil yang akan pergi melintasi lebar dari situs web. Create a new layer in the “Header” folder called “Header Box” and move it to the bottom of the folder. Buat layer baru di folder "Header" yang disebut "Header Box" dan memindahkannya ke bagian bawah folder. Click on the square marquee tool and change the style to fixed size and the size to 960x250px. Klik pada alat tenda persegi dan mengubah gaya untuk ukuran yang tetap dan ukuran untuk 960x250px. Fill the box with #333333. Isi kotak dengan # 333333. The box should touch the top header but not overlap it, and the bottom tire of the car should overlap the box. Kotak harus menyentuh bagian header namun tidak tumpang tindih, dan ban bagian bawah mobil harus tumpang tindih kotak.
Now we are going to add some layer styles to the box. Sekarang kita akan menambahkan beberapa gaya layer untuk kotak.
Click on the layer styles and go to Inner Glow. Klik pada gaya lapisan dan pergi ke Inner Glow. Change the color to black to give it a shadow around all of the edges. Perubahan warna menjadi hitam untuk memberikan bayangan sekitar semua tepi.

Now go to Pattern Overlay. Sekarang pergi ke Overlay Pola. Select the carbon fiber pattern, and drop the opacity to 10%. Pilih pola serat karbon, dan drop opacity menjadi 10%. This will give the background a subtle texture. Ini akan memberikan latar belakang tekstur halus.

Next we are going to add a stroke around the box using #666666 for the stroke color. Selanjutnya kita akan menambahkan stroke sekitar kotak menggunakan # 666666 untuk warna stroke.

The last layer style we are going to do is to add a Gradient Overlay. Gaya lapisan terakhir yang akan kita lakukan adalah untuk menambahkan Gradient Overlay.

All of these styles will give our gray box a little more interesting and finished off look to it. Semua gaya ini akan memberikan kotak abu-abu kami sedikit lebih menarik dan terlihat menghabiskan untuk itu.

Step 18 Langkah 18

Now we want to work on the yellow caution bar that goes across our document. Sekarang kita ingin bekerja di bar kuning yang berjalan hati-hati di dokumen kami. First create a new folder and call it “Caution Bar” and move it just above the “Header Box” layer. Pertama membuat folder baru dan menyebutnya "Bar Perhatian" dan memindahkannya tepat di atas lapisan "Header Kotak".
Using the Square Marquee Tool (M) create a box with a fixed size of 20x50px and fill it with #FFCC00 (the same yellow as the text in the header). Menggunakan Square Marquee Tool (M) membuat sebuah kotak dengan ukuran tetap 20x50px dan mengisinya dengan # FFCC00 (kuning sama dengan teks di header).

Using the Transform Tool (Ctrl+T) Rotate the box 20 degrees. Menggunakan Perangkat Transform (Ctrl + T) Putar kotak 20 derajat.

Step 19 Langkah 19

Duplicate the box with Ctrl+J and then, while holding down Shift, move the box to the right four spaces. Gandakan kotak dengan Ctrl + J dan kemudian, sambil menekan Shift, memindahkan kotak ke empat ruang yang tepat. (Holding down shift moves an object 10px instead of 1px) (Menahan pergeseran bergerak suatu 10px objek bukan 1px)
Link the two layers together and use Ctrl+E to merge the layers. Link dua lapisan bersama-sama dan menggunakan Ctrl + E untuk menggabungkan layer.
Using the fixed size marquee square, create a 100x30px box and put it in the middle of the two boxes, so none of the corners are inside the box. Menggunakan ukuran tenda tetap persegi, membuat kotak 100x30px dan meletakkannya di tengah-tengah dua kotak, sehingga tidak ada sudut berada di dalam kotak. Get the inverse selection with Ctrl+Shift+I and delete. Dapatkan seleksi invers dengan Ctrl + Shift + I dan menghapus. This should leave just the area that was inside the box left, with a flat edge on the top and bottom. Ini harus meninggalkan hanya daerah yang berada di dalam kotak sebelah kiri, dengan ujung datar di bagian atas dan bawah.

Step 20 Langkah 20

Duplicate the two boxes with Ctrl+J, then hold down shift and move over 8 spaces. Gandakan dua kotak dengan Ctrl + J, kemudian tahan shift dan bergerak di atas 8 ruang. This will evenly space the squares apart. Hal ini merata akan ruang kotak terpisah. Continue duplicating and moving the squares 8 spaces until the boxes go across the document. Lanjutkan duplikasi dan memindahkan kotak 8 ruang sampai pergi ke seberang kotak dokumen.

Step 21 Langkah 21

Using the Single Row Marquee Tool (M) we, we are going to start creating the top and bottom border on the caution bar. Menggunakan Row Marquee Tunggal Tool (M) kita, kita akan mulai membuat perbatasan atas dan bawah pada bar hati-hati.
We will create the top border first. Kami akan membuat perbatasan atas pertama. The first line just above the yellow boxes will be black (#000000). Baris pertama tepat di atas kotak kuning akan menjadi hitam (# 000000). Move the marquee up one pixel and the fill with #333333. Pindahkan tenda satu piksel dan isi dengan # 333333. Move the marquee up one pixel once again and fill it with #666666. Pindahkan tenda satu piksel sekali lagi dan mengisinya dengan # 666666.

Duplicate the top border with Ctrl+J and bring it down just below the yellow boxes. Gandakan perbatasan atas dengan Ctrl + J dan menurunkannya tepat di bawah kotak kuning.

Step 22 Langkah 22

Create a new layer above the yellow boxes and using the fixed size Square Marquee (M) make a 1200x30px box, and fill with black. Buat layer baru di atas kotak kuning dan menggunakan ukuran tetap Lapangan Marquee (M) membuat kotak 1200x30px, dan mengisi dengan hitam. This will cover the entire caution bar. Ini akan mencakup seluruh hati-hati bar. Now drop the fill down to 0%. Sekarang jatuhkan mengisi turun ke 0%. This should make the box disappear. Hal ini seharusnya membuat kotak menghilang. The reason for this is that when we add a layer style, that will show up but not the actual box. Alasan untuk ini adalah bahwa ketika kita menambahkan lapisan gaya, yang akan muncul tetapi tidak kotak yang sebenarnya.
So lets go into our Layer Styles and add an Inner Shadow. Jadi mari kita pergi ke Layer Styles dan menambahkan Inner Shadow. Change the shadow color to #191400 in the settings. Mengubah warna bayangan untuk # 191400 dalam pengaturan.

Step 23 Langkah 23

We want to give the caution bar a shiny look, so first change the Square Marquee (M) to 1200x15px (half of the box). Kami ingin memberikan peringatan bar tampak mengkilap, jadi pertama mengubah Marquee Square (M) untuk 1200x15px (setengah dari kotak). Move the box so it is at the bottom of the yellow boxes and fill with black. Pindahkan kotak sehingga di bagian bawah kotak kuning dan isi dengan hitam. Drop the opacity to 30%. Jatuhkan opacity menjadi 30%.
Make a box the same size at the top of the yellow boxes and fill with white. Buatlah sebuah kotak dengan ukuran yang sama di bagian atas kotak kuning dan isi dengan putih. Drop the opacity down to 20%. Jatuhkan opacity ke 20%.

Step 24 Langkah 24

Move the caution bar just below the box at the top of the document. Pindahkan bar hati-hati tepat di bawah kotak di atas dokumen.
Now we want to get rid of the stroke on the top and bottom of the box so looks like it is sitting behind the top header and the caution bar. Sekarang kita ingin menyingkirkan stroke pada bagian atas dan bawah kotak sehingga terlihat seperti itu duduk di belakang header bar atas dan hati-hati.
Select the box layer and use Ctrl+T to use the Transform tool. Pilih layer kotak dan gunakan Ctrl + T untuk menggunakan Transform tool. Click and drag the bottom anchor behind the top border of the caution bar and move the top anchor behind the top header. Klik dan tarik jangkar bawah belakang perbatasan atas bar hati-hati dan memindahkan jangkar atas belakang header.

Step 25 Langkah 25

Now we are going to create an image box to the right of the car. Sekarang kita akan membuat sebuah kotak gambar di sebelah kanan mobil. Lets start out by creating a box 500x210px and filled with #333333. Mari kita memulai dengan menciptakan 500x210px kotak dan diisi dengan # 333333. The box should be 10px from the right side of the box and 20px from the top and bottom of the box. Kotak harus 10px dari sisi kanan kotak dan 20px dari atas dan bawah kotak.
We are going to add a Bevel and Emboss. Kami akan menambahkan Bevel dan Emboss.

Step 26 Langkah 26

We want to make a spot for our photo and we want to make sure it is center. Kami ingin membuat sebuah tempat untuk foto kami dan kami ingin memastikan itu adalah pusat. So to make sure it is center click on the box layer and bring up the transform tool with Ctrl+ T. Drag a horizontal and a vertical guide from the rulers and put the in the middle of the box, the intersecting point being our center point. Jadi untuk memastikan itu adalah pusat klik pada layer kotak dan membawa alat transformasi dengan Ctrl + T. Tarik horizontal dan vertikal panduan dari penguasa dan menempatkan di tengah kotak, titik berpotongan menjadi titik pusat kita.
Create a new box 400x180px and fill it with black. Buat 400x180px kotak baru dan mengisinya dengan hitam. Using the Transform tool, move the box so that the middle lines up with the guides we just made. Menggunakan Transform tool, memindahkan kotak sehingga garis tengah dengan pemandu kami hanya dibuat. For now this will be a placeholder for our photo. Untuk saat ini akan menjadi tempat untuk foto kita.

Step 27 Langkah 27

Create a new box 1x180px and line it up with the top and bottom of the photo placeholder and five spaces from the left. Buat 1x180px kotak baru dan garis itu dengan bagian atas dan bawah dari placeholder foto dan lima spasi dari kiri. Fill the box with black. Isi kotak dengan warna hitam. Move the marquee over one space and fill with #666666. Pindahkan tenda lebih dari satu ruang dan isi dengan # 666666. Move over five spaces and repeat until you have six of the light/dark lines. Pindah selama lima ruang dan ulangi sampai Anda memiliki enam dari terang / gelap baris.
Drop the opacity down to 30%. Jatuhkan opacity ke 30%. Duplicate the layer (Ctrl+J) and using the Transform Tool (Ctrl+T), rotate the lines 180 degrees and move them over to the other side of the box, five spaces from the right of the photo placeholder. Gandakan layer (Ctrl + J) dan menggunakan Perangkat Transform (Ctrl + T), memutar 180 derajat garis dan memindahkan mereka ke sisi lain dari kotak, lima spasi dari kanan placeholder foto.

Step 28 Langkah 28

Lets add a few more Layer Styles to our box to give the box more of a textured metal look. Mari menambahkan beberapa Layer Styles lebih ke kotak kami untuk memberikan kotak lebih melihat logam bertekstur.
First, we'll add an Inner Shadow Pertama, kita akan menambahkan Inner Shadow

…then Satin ... Maka Satin

…and finally a Gradient Overlay. ... Dan akhirnya Gradient Overlay.

Step 29 Langkah 29

Open up the racing image in Photoshop. Bukalah gambar balap di Photoshop.

We are going to do some color corrections, so first open up the levels (Ctrl+L) to brighten up the image. Kami akan melakukan beberapa koreksi warna, jadi pertama membuka tingkat (Ctrl + L) untuk mencerahkan gambar.
Then we will open up the Hue/Saturation (Ctrl+U) to brighten the colors. Kemudian kita akan membuka Hue Saturation / (Ctrl + U) untuk mencerahkan warna.

Step 30 Langkah 30

We are going to change the color of the grass from brown back to green. Kita akan mengubah warna rumput dari belakang coklat sampai hijau. Go to Image>Adjustments>Replace Color. Pergi ke Warna Image>> Adjustments Ganti. Click on the brown grass and adjust the settings something like what I have. Klik pada rumput coklat dan menyesuaikan pengaturan sesuatu seperti apa yang saya miliki.

Step 31 Langkah 31

Take the racing image and drag it into our document. Mengambil gambar balap dan seret ke dalam dokumen kita. Ctrl and then click on the photo placeholder and click on the mask icon at the bottom of the layers palette. Ctrl dan kemudian klik pada placeholder foto dan klik pada ikon masker di bagian bawah palet layer. This will mask out the image except for where the placeholder is. Ini akan menutupi keluar gambar kecuali untuk mana placeholder ini. Click on the eye icon next to the placeholder layer to make it disappear. Klik pada ikon mata di sebelah layer placeholder untuk membuatnya menghilang.
Right now you should have an overly size image. Sekarang Anda harus memiliki citra yang terlalu ukuran. To shrink it we want to click on the chain link in between the layer and the mask to make it disappear. Untuk mengecilkan itu kita ingin klik pada link rantai di antara layer dan mask untuk membuatnya menghilang. Click on the racing layer and now we can use the Transform tool to adjust the size of the image. Klik pada lapisan balap dan sekarang kita dapat menggunakan Transform tool untuk menyesuaikan ukuran gambar.

Step 32 Langkah 32

Go into the Layer Styles and add a #666666 1px stroke to the photo. Pergi ke Layer Styles dan menambahkan stroke # 666666 1px ke foto.

I also added a box with a 70% opacity and some text with the same style as the text in the top header. Saya juga menambahkan kotak dengan opacity 70% dan beberapa teks dengan gaya yang sama seperti teks di header atas.

Step 33 Langkah 33

We are going to add in our sidebar. Kami akan menambahkan di sidebar kita. Click on one of the border layers on the top header and duplicate it with Ctrl+J and put it in a new folder called “Sidebar”. Klik pada salah satu lapisan perbatasan pada header atas dan duplikat dengan Ctrl + J dan meletakkannya di folder baru bernama "Sidebar".
Move the border down so it is just below the caution bar. Pindahkan perbatasan bawah sehingga tepat di bawah bar hati-hati. Hold down shift and move the border down two spaces. Tahan shift dan memindahkan perbatasan bawah dua ruang. This will make it so it is 20px below the caution bar. Ini akan membuatnya jadi 20px bawah bar hati-hati.
Create a marquee box around the border within the sidebar guides. Buat kotak tenda di sekitar perbatasan dalam panduan sidebar. Get the inverse selection with Ctrl+Shift+I and delete. Dapatkan seleksi invers dengan Ctrl + Shift + I dan menghapus. This should leave just the part of the border within the sidebar area. Ini harus meninggalkan hanya bagian dari perbatasan dalam wilayah sidebar.

Step 34 Langkah 34

Duplicate the border with Ctrl+J and while holding down shift, move it down two spaces. Gandakan perbatasan dengan Ctrl + J dan sambil menekan shift, memindahkannya ke dua spasi.
Duplicate the gray box from the header and move it into our “sidebar” folder. Gandakan kotak abu-abu dari header dan memindahkannya ke folder kita "sidebar". Resize the box with Ctrl+T to fit in between the two borders as well as the guides. Mengubah ukuran kotak dengan Ctrl + T untuk masuk di antara dua perbatasan serta panduan.
Open up the layer styles and go to Pattern Overlay and use the carbon fiber pattern with a 10% opacity. Buka gaya lapisan dan pergi ke Overlay Pola dan menggunakan pola serat karbon dengan opacity 10%.

Step 35 Langkah 35

Duplicate the text from the navigation bar with Ctrl+J and move it into our sidebar folder. Gandakan teks dari bar navigasi dengan Ctrl + J dan memindahkannya ke folder sidebar kita. Delete all the text except for “home” and move it into the middle of the sidebar box we just made. Hapus semua teks kecuali untuk "rumah" dan memindahkannya ke tengah kotak sidebar kami hanya dibuat. Hold down shift and move the text to the right. Tahan shift dan memindahkan teks ke kanan. Change “home” to “schedule”. Ubah "rumah" untuk "jadwal".

Step 36 Langkah 36

Duplicate the sidebar folder by right-clicking on it and click on Duplicate Layer Set. Gandakan folder sidebar dengan mengklik kanan di atasnya dan klik Set Duplicate Layer. Change the folder name to “Content”. Ubah nama folder "Konten". This will be the folder for our posts on the left side of the website. Ini akan menjadi folder untuk postingan kita di sisi kiri website.
Using Ctrl+T stretch the content header layers out, except the text, so it fits in the content guides. Menggunakan Ctrl + T peregangan lapisan isi header keluar, kecuali teks, sehingga cocok dalam panduan konten. Change “schedule” to “news”. Ubah "jadwal" untuk "berita".

Step 37 Langkah 37

Here is the text for the schedule in the sidebar: Berikut adalah teks untuk jadwal di sidebar:
July 26th, 12:20 pm Week 5 Race starts Juli 26, 12:20 Minggu 5 Ras mulai
August 3rd, 12:20 pm Week 6 Race starts Agustus 3, 12:20 Minggu 6 Ras mulai
August 8th, 8:15 pm Week 7 Race starts Agustus 8, 08:15 Minggu 7 Ras mulai
August 16th, 12:20 pm Week 8 Race starts Agustus 16, 12:20 Minggu 8 Ras mulai
August 23rd, 12:20 pm Week 8 Race starts Agustus 23, 12:20 Minggu 8 Ras mulai
August 30th, 12:20 pm Week 8 Race starts Agustus 30, 12:20 Minggu 8 Ras mulai
September 6th, 12:20 pm Week 8 Race starts September 6, 12:20 Minggu 8 Ras mulai
The font I am using is ITC Franklin Gothic Medium at 12pt. Font saya gunakan adalah Franklin Gothic Medium ITC di 12pt.
Use the #FF00CC for the dates and white for the right column. Gunakan # FF00CC untuk tanggal dan putih untuk kolom kanan.

Step 38 Langkah 38

Duplicate the “schedule head” folder and call it “sponsor head”, and change “schedule” to “sponsors” Gandakan "jadwal kepala" folder dan menyebutnya "sponsor kepala", dan mengubah "jadwal" untuk "sponsor"
You can put a sponsor at the bottom, I'm just going to come up with something quickly using this tire photo . Anda dapat menempatkan sponsor di bagian bawah, aku hanya akan datang dengan sesuatu dengan cepat menggunakan foto ini ban .

Step 39 Langkah 39

We are going to start adding in our posts now. Kita akan mulai menambahkan dalam posting kita sekarang. Duplicate the “news” header and put it in a new folder called “Post 1” Duplikat "berita" header dan memasukkannya ke dalam sebuah folder baru bernama "Posting 1"
Duplicate the racing image and put it in the “Post 1” folder also. Gandakan gambar balap dan meletakkannya di "1 Post" folder juga. Click on the mask and fill the entire layer with white, then create a 200x200px box with the Square Marquee tool (M), get the inverse selection with Ctrl+Shift+I and delete. Klik pada topeng dan mengisi seluruh lapisan putih, kemudian membuat kotak 200x200px dengan Square Marquee tool (M), mendapatkan pilihan invers dengan Ctrl + + Shift I dan menghapus. This should leave just a 200x200px box with the racing image inside. Ini harus meninggalkan hanya kotak 200x200px dengan bagian dalam gambar balap.

Step 40 Langkah 40

Take the “news” header layers and duplicate them. Ambil "berita" lapisan header dan duplikat mereka. Take the news text and put it in the trash. Ambil teks berita dan menaruhnya di tempat sampah. This is the start of our post box. Ini adalah awal dari kotak pos kita. Move the top border so it is touching the bottom of the bottom border. Pindahkan perbatasan atas sehingga menyentuh bagian bawah perbatasan bawah. Now hold down shift and move the box down one space. Sekarang tahan shift dan memindahkan kotak ke bawah satu ruang. Take the square image we just made and move it so it is resting on the bottom of the top border. Mengambil gambar persegi kita baru saja dibuat dan memindahkannya sehingga beristirahat di bawah perbatasan atas. Then hold down shift and move it down two spaces and in two spaces from the left guide. Kemudian tahan tombol shift dan memindahkannya ke dua ruang dan dalam dua spasi dari panduan kiri.
Move the bottom border to the bottom of the photo, then hold down Shift and move it down two spaces. Pindahkan perbatasan bawah ke bagian bawah foto, kemudian tahan tombol Shift dan memindahkannya ke dua spasi. This will make it so the photo is 20px away from the top, bottom and right side Ini akan membuatnya jadi foto adalah 20px jauh dari bawah, atas dan sisi kanan
Now using Ctrl+T, stretch the gray box so it lines up with the top and bottom borders. Sekarang menggunakan Ctrl + T, peregangan kotak abu-abu sehingga baris dengan perbatasan atas dan bawah. Move the Pattern Overlay to the trash. Pindahkan Overlay Pola ke tempat sampah.

Step 41 Langkah 41

Now we are going to add in some preview text: Sekarang kita akan menambahkan beberapa teks preview:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed voluptua diam. At vero eos et accusam et justo duo dolores et ea rebum. Pada vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, tidak ada laut takimata sanctus est Lorem ipsum dolor amet duduk. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed voluptua diam.
Continue… Lanjutkan ...
The continue will be the #FFCC00 yellow and aligned to the right. Terus akan menjadi # FFCC00 kuning dan selaras ke kanan. The font is ITC Franklin Gothic Book at 12 pt. Font yang ITC Franklin Gothic Book pada 12 pt.
Make the text box go from the right edge of the photo to the right edge of the post box. Buat kotak teks pergi dari tepi kanan foto ke tepi kanan kotak pos. Now hold down shift and move the box to the right four spaces. Sekarang tahan shift dan memindahkan kotak ke empat ruang yang tepat. Double-click on the text layer and move the right anchor to the right edge of the post box. Double-klik pada layer teks dan memindahkan hak jangkar ke tepi kanan kotak pos. Click ok and while holding shift move the text box to the left twice. Klik ok dan sambil memegang pergeseran memindahkan kotak teks ke kiri dua kali. This will give a 20px border between the photo and the right edge of the post box. Ini akan memberikan perbatasan 20px antara foto dan tepi kanan dari kotak pos.
Move a guide to the left side of the text. Pindah panduan ke sisi kiri teks.
We are going to add a headline to this also. Kami akan menambahkan judul untuk ini juga. “This Week's Race Preview”. "Perlombaan ini Week Preview". The font will be ITC Franklin Gothic Heavy at 26pt, with the #FFCC00 for our color. Font akan ITC Franklin Gothic Berat di 26pt, dengan # FFCC00 untuk warna kita.

Step 42 Langkah 42

Duplicate the post in folder twice and call them “post 2” and post 3” Move them down so there is 20px between each post. Gandakan posting dalam folder dua kali dan memanggil mereka "posting 2" dan pasca 3 "Pindahkan mereka turun sehingga ada 20px antara setiap posting.
The last post we want to fade out, so we can add in our footer. Posting terakhir kami ingin memudar keluar, sehingga kita dapat menambahkan di footer kami. Click on the layer mask and using a black to 0% opacity gradient click and drag the gradient from the bottom up, so you get something like I have. Klik pada lapisan masker dan menggunakan hitam untuk 0% gradien opacity klik dan tarik gradient dari bawah ke atas, sehingga Anda mendapatkan sesuatu seperti yang saya miliki.

Step 43 Langkah 43

Now for the footer, we are going to duplicate the caution bar and move it into a new folder called “footer” and move it below the last post and ad. Sekarang untuk footer, kita akan menduplikasi bar hati-hati dan memindahkannya ke sebuah folder baru yang disebut "footer" dan memindahkannya di bawah posting terakhir dan iklan.
Duplicate the gray box behind the car and move it into the “footer” folder. Gandakan kotak abu-abu di belakang mobil dan memindahkannya ke folder "footer". Using Ctrl+T stretch it out past the ends of the document so the inner shadow doesn't show on the edges. Menggunakan Ctrl + T meregangkan itu keluar melewati ujung dokumen sehingga bayangan batin tidak menunjukkan di pinggiran.

Step 44 Langkah 44

Lastly we are going to add our footer information: Terakhir kita akan menambahkan informasi footer kami:
Copyright 2010. Copyright 2010. All Rights Reserved. All Rights Reserved.

Final Result Hasil akhir

Get you networking credential with testking and obtain highest score in real exam using ccna and ccnp materials. Dapatkan Anda jaringan credential dengan testking dan memperoleh nilai tertinggi dalam ujian yang nyata menggunakan CCNA dan CCNP bahan.

Posted in: Photoshop Web