Bagaimana Cara Desain Icon Telepon di Photoshop

Cara Desain Icon Telepon di Photoshop - Sebagai orang modern, kita semua memiliki daya tarik tertentu untuk gadget segar yang ditawarkan oleh teknologi terbaru. Di sini kita berbicara tentang ponsel yang saya temukan biasanya memukau saya lebih dari apa pun. Telepon sering ditafsirkan oleh banyak seniman menurut pandangan mereka atau pandangan jenis. Tidak mengherankan, interpretasi ini sering yakin-api hits dengan desainer lain di luar sana.

Dalam Tutorial Photoshop rinci, anda akan belajar cara membuat ikon profesional yang tinggi akhir Telepon dengan pengetahuan yang terbatas dalam Layer dan Layer Styles. Satu-satunya keterampilan yang diperlukan untuk bisa melewati tutorial ini adalah pengetahuan dasar tentang cara menggunakan alat yang paling umum di Photoshop. Hanya dalam beberapa langkah kita akan membuat mata benar-benar penangkapan ikon Telepon siap untuk digunakan dengan cara apapun yang Anda inginkan dan bisa memikirkan.


Ketika datang ke perangkat tambahan mengedit gambar atau foto, Adobe Photoshop biasanya merupakan pilihan utama untuk dipertimbangkan. Namun, paket perangkat lunak itu sendiri adalah cukup sulit untuk belajar - dan sangat sulit untuk menguasai.

Bagi mereka, yang tidak tahu apa itu Adobe Photoshop? Dan apa yang bisa dilakukan? Kemudian ikuti link di bawah ini untuk pengenalan detail.

Mari kita lihat apa yang Anda akan menciptakan dalam tutorial ini. Anda bisa mengklik pada gambar untuk melihat versi skala penuh.

Langkah 1: Membuat File Baru

Kita akan mulai dengan membuat file baru menggunakan Photoshop CS4. Setelah membuka Photoshop buka File>> New ... atau anda hanya dapat menggunakan Ctrl + N. Gunakan pengaturan pada gambar di bawah untuk file yang baru Anda.

Langkah 2: Menyiapkan Latar Belakang (Background)

Sekarang mari kita mengatur lapisan latar belakang Blending Options untuk pengaturan pada gambar di bawah ini untuk Gradient Overlay.

Langkah 3: Membuat Tubuh Telepon - Membuat Layer Shape

Jadi, sekarang setelah lapisan latar belakang sudah siap kita dapat mulai membuat lapisan bentuk telepon. Pilih Rounded Rectangle Tool (U) dan mengatur warna dan bentuk untuk Black 20px radius sudut dibulatkan seperti yang ditunjukkan pada gambar di bawah. Kemudian menggambar bentuk persegi panjang dengan ukuran tetap 360px 560px * untuk tutorial ini, tetapi anda bebas untuk memilih ukuran yang Anda inginkan untuk versi Anda. Lalu bentuk baru Anda mengubah nama layer "telepon".

Langkah 4: Membuat Tubuh Telepon - Menerapkan Layer Styles

Setelah membuat lapisan bentuk untuk ponsel kita akan memiliki hasil sebagai berikut. Sekarang tekan Ctrl + A sementara "telepon" Anda lapisan dipilih dan kemudian pilih Move Tool (V) dan kemudian pergi ke Layer>> Align Layers untuk Seleksi>> Vertikal Pusat maka Horizontal Pusat ini akan membuat telepon kami selaras ke tengah kami kanvas.


Sekarang buka opsi "telepon" lapisan campuran dan menggunakan pengaturan dalam gambar di bawah ini untuk Drop Shadow, Inner Shadow, Inner Glow, Gradient Overlay, Pola Tampilan (gunakan Brushed Metal Wallpaper sebagai pola Atau, Anda dapat membuat Anda Metal sendiri. tekstur melalui ini tutorial photoshop), dan Stroke.

Mengimpor Wallpaper Metal Brushed sebagai Pola

Anda dapat membuat pola dari wallpaper dengan hanya membuka wallpaper di Photoshop dan kemudian goto Edit>> Tentukan Pola ... dan kemudian beri nama yang Anda sukai.

Jika Anda punya hak segala sesuatu yang "telepon" lapisan bentuk terlihat persis seperti gambar di bawah ini.

Langkah 5: Membuat Layar Telepon - Membuat The Shape Layers

Sekarang kita dapat mulai membuat lapisan layar bentuk. Pilih Rounded Rectangle Tool (U) dan mengatur warna dan bentuk untuk Black 10px radius sudut dibulatkan seperti yang ditunjukkan pada gambar di bawah. Kemudian menggambar bentuk persegi panjang dengan ukuran tetap 400px * 300px. Lalu bentuk baru Anda mengubah nama layer "layar 1".


Sekarang menyelaraskan "layar 1" lapisan bentuk horizontal untuk kanvas seperti yang kita lakukan dengan lapisan telepon bentuk pada Langkah 4, tetapi tidak menyejajarkan secara vertikal hanya bergerak secara vertikal sehingga sebagian besar sepertiga bagian bawah bentuk telepon jelas. Anda dapat menggunakan gambar di bawah ini sebagai panduan.

Langkah 6: Membuat Layar Telepon - duplikasi Layer Shape

Sekarang kita akan menduplikasi "layar 1" lapisan pembentuk 3 Tiga kali dengan pergi ke Layer>> Duplicate Layer ... dan panggilan lapisan baru "layar 2", "layar 3" dan "layar 4".

Langkah 7: Membuat Layar Telepon - Menerapkan Layer Styles

Sekarang kami memiliki empat lapisan berbentuk layar yang mirip kita akan menerapkan style untuk setiap lapisan. Pilih "layar 1" bentuk layer dan kemudian pilih Pilihan Memadukan dan menerapkan pengaturan dalam gambar di bawah ini untuk Inner Shadow, Gradient Overlay dan Stroke.





"layar 1" layer akan tampak seperti gambar di bawah ini.


Sekarang kita akan menerapkan style untuk "layar 2" layer. Pilih "layar 2" bentuk layer dan kemudian pilih Pilihan Memadukan dan menerapkan pengaturan dalam gambar di bawah ini untuk Isi Opacity, Inner Shadow, Outer Glow dan Gradient Overlay (saya menggunakan warna gradien yang sama seperti pada layer "layar 1").





"layar 2" layer akan tampak seperti gambar di bawah ini.


gan di translate ajah ya ... di atas udah ane siapin google translate , tinggal pilih bahasa ..
Now we are going to apply styles to “screen 3″ layer. Select “screen 3″ shape layer and then select Blending Options and apply the settings in the images below for Fill Opacity and Satin.



The “screen 3″ layer should look like the image below.


Now we are going to apply styles to “screen 4″ layer. Select “screen 4″ shape layer and then select Blending Options and apply the settings in the images below for Fill Opacity and Bevel and Emboss.



The “screen 4″ layer should look like the image below.

Step 8: Creating The Phone Screen – Create Screen Light Reflection

Now let’s add a little light reflection to the screen to make it more realistic. Create the Shape layer as shown in the image below. Rename the new layer to “screen reflection”.


Select “screen reflection” shape layer and then go to Blending Options and use the settings in the images below for Fill Opacity and Gradient Overlay.



Now you should have a result similar to image below.

Step 9: Creating The Phone Navigation Dial – Create Shape Layers

Using the Ellipse Tool (U) create a circle shape with a fixed size of 85px*85px, set shape color to Black and rename the layer to “navigation 1″, duplicate the shape layer as “navigation 2″. Place the Shape layers as shown in the image below.

Step 10: Creating The Phone Navigation Dial – Applying Layer Styles

Now, select layer “navigation 1″ and then Blending Options and use the settings in the images below for Blend Mode, Bevel and Emboss, Gradient Overlay and Stroke.





Layer “navigation 1″ should look like the image below.


Now, select layer “navigation 2″ and then Blending Options and use the settings in the images below for Inner Glow, Bevel and Emboss, Gradient Overlay and Stroke.





Layer “navigation 2″ should look like the image below.

Step 11: Creating The Phone Command Buttons – Create Shape Layers

Using the Pen Tool (P) create a shape similar to the image below, set shape color to Black, top right corner radius to 10px and rename the layer to “command 1″, duplicate the shape layer as “command 2″, “end call” and “accept call”. Place the Shape layers as shown in the image below.

Step 12: Creating The Phone Command Buttons – Apply Layer Styles

Now apply the Inner Glow, Gradient Overlay and Stroke to all four command layers as in the images below.




Now apply the Bevel and Emboss style for layers “command 1″, “end call”, “command 2″ and “accept call” as the images below consecutively.





The result should be as in the image below.

Step 13: Creating The Phone Command Buttons – Create Command Buttons Engravings

Now we finish command buttons by creating the engravings on them. Using Line Tool (U) create with a weight of 3px and a width of 30px and set layer color to Black. Duplicate the Layers 3 times and align them to each command button as in the image below.

Step 14: Creating The Phone Command Buttons – Apply Style to Engravings

Apply the Blending Options settings for all layers for Inner Shadow, and apply Blending Options settings to each layer as in the images below. Apply the red styles to the end call button engraving, green styles to the accept call button engraving and blue to “command 1″ and “command 2″ engravings.

Step 15: Creating The Phone Navigation – Create Engravings

Now using Pencil Tool (B) with a master diameter of 3px, then create a new empty layer by going to Layer >> New >> Layer… or use the shortcut Shift+Ctrl+N, and then draw a shape like the one in the image below (use Black as color). Repeat the same step on a new layer but use White as color.

Step 16: Creating The Phone Navigation – Create Engravings

Now align the two layers to “navigation 2″ layer to the center horizontally and then move the white layer one time to the bottom. Then duplicate the layers and rotate them 90 degree CW by going to Edit >> Transform >> Rotate 90 CW and repeat this 2 times, and distribute each two sets on the dial as in the image below.

Step 17: Creating The Phone Speaker

Now we are going to create the speaker using Rounded Rectangle Tool (U) with fixed width and height of 100px*8px and using the settings in the image below.


Create using the settings two shape layers call the lower layer “speaker back” and the hight layer “speaker”. Position both layers to center of the phone horizontally and at the top of the phone above the screen in the space available, just like the image below.

Step 18: Styling The Phone Speaker

Select the “speaker back” layer and open Blending Options and use the settings in the image below for Bevel and Emboss.


Select the “speaker” layer and open Blending Options and use the settings in the images below for Blend Mode, Drop Shadow, Inner Shadow, Inner Glow, Bevel and Emboss and Contour.








You should have a result like the image below.

Step 19: Creating Phone Shadow

Now, after we finished the phone we will start on making the shadow. Select the background layer (the first layer we created in this tutorial) then using Pen Tool (P) and the color Black create a shape under the phone similar to the image below with a width of about 400px, then rename the layer to “shadow”.


Now select the “shadow” layer and goto Layer >> Rasterize >> Shape, so that we can apply a filter on the shape layer. Now goto Filter >> Blur >> Gaussian Blur… and use the settings in the image below.

Applying Filters to Shape Layers

You can apply filters to Shape layers in two ways: First, by rasterizing the shape layer but in this case you lose the qualities of resizable shape layers. Second, by converting the shape layer to smart object and keep all the qualities of resizable shape layers. You can convert a shape layer to a smart object by first selecting the layer and then goto Layer >> Smart Objects >> Convert To Smart Object.

You would have the result in the image below.


Now move the “shadow” layer just like the image and set its Opacity to 60%.

Step 20: Creating Phone Reflection

Now, select and duplicate the “phone” layer select the “phone” layer again and goto Layer >> Group Layers or you can just use Ctrl+G and name the group “reflection”, move the group just under the phone like in the image below.


Now we can apply a layer mask to the group, select the “reflection” group and then goto Layer >> Layer Mask >> Reveal All, then select the Gradient Tool (G) and set gradient from Black to White and Drag from the lower third of the phone to the bottom.
You can use the below image as a guideline.


Now, if you have followed the tutorial step by step then you should have a result similar to the final image below (Click on the image for the full resolution image).

Kesimpulan
Saya buat tutorial ini untuk menunjukkan cara mudah untuk merancang gadget dan ikon, dan untuk menunjukkan anda bahwa beberapa pengetahuan dasar di Photoshop dan gaya lapisan dapat membuat banyak jika ditempatkan dalam sebuah ide dipikirkan dengan baik. Saya harap Anda semua dapat membuat desain lebih baik dengan menggunakan hal-hal kecil saya berbagi dengan Anda di sini.
salam hangat (komputertutorial.com)