hehe, gw mang dah lama ga posting tutorial baru. berkutat ama urusan sendok ama piring di dapur. wkaakak..

tapi gw pernah janji kalo bakalan exist di blog legendaris ini. ya, dremi.INFO blog pertama gw mengudara sejak 2005, uset dah! emang radio apa… hahaaha

tapi sekalipun demikian, gw selalui ngikutin perkembangan pendidikan di tanah air. dan beberapa memang membuat gw geleng-geleng kepala. dari dulu ampe sekarang, tutorial yang gw jumpai, itu itu mulu. ayolah kawand, ciptakan sesuatu yang beda! biar popularitas kagak jadi tolak ukur sebuah blog. tapi kualitas nya juga donk!

woke! thanks bwat faris, argon, hendri lingga, ama fans berat dr.emi : M Firmansyah, Black Scorpio Night, Al-K, Ephii, X-ZER0 a.k.a Radiaku, ga lupa juga bwat om C01n yang udah lama ngilang, om ajarin gw lagi!!! , bwat temen temen di ITC ada x-n1nj4 and crew, kalian smua bikin gw tambah semangat, let’s make Lombok as one of Cyber Iland, juga bwat para member lainna yang masih mendukung gw, yang tros ngasi gw semangat. agar tetep exist di blog ini. forum gw sekalipun dah sepi, member dah pada lumpuh, gw masih punya nyali bwat nulis ni tutorial. tutorial ni bwat advance coder, gw saranin bwat nutup jendela + pintu kamar dulu dah! hihi!

kali ini gw mau kasi sdikit tutorial sederhana tapi berguna bwat pada developer web based, hususna bwat yang sering ngerjain aplikasi intranet. sebetulnya apa aja yang bisa dilakukan dengan aplikasi web based? banyak brur! lu kire web based cuma bisa memperindah halaman web lu di browser dowank? kagak! web based punya kemampuan lebih dari sekedar opensource. kelebihannya yang mampu berintegrasi dengan environment system, membuat gw ga ada bosen bosen nya bwat ngoprek yang namanya aplikasi web based.

tros mau bikin apaan mang na? ni tutorial bwat ngegambarin, gimana sih konsep/teknik mengintegrasikan web based aplication ama system/aplikasi diluarna? gw sebut aja external application. tentuna bwat tujuan tertentu ye…

kite bakalan belajar bijimane mengontrol system jaringan via website. kalo yang udah pernah belajar router/server, pasti familiar dengan kata" remote kan? nah ni ceritanye gw mau kasi gambaran bijimane bkin remote control system via web based.

control system yang bakalan kite jadiin sample kasus adalah me-restart, mematikan, dan mengeksekusi perintah open dan close sebuah drive CD-ROM pada remote system. cukup tiga aja ya, sekalipun banyak macam perintah remote yang bisa lu lakuin selain 3 ntu tadi.

bwat ngejalanin misina, gw perlu beberapa hal kayak di bawah ini ni:

1. Adobe photoshop, bwat ngerancang antar muka aplikasi
2. Adobe Dreamweaver, bwat editing layout antar muka aplikasi + coding na, atau kalo lu cukup mahir, gw saranin make Zend Studio bwat coding na
3. Web Server Apache + PHP 5
4. Browser apa aja
5. LAN, ni bwat ujicoba dowank, sebuah jaringan peer 2 peer juga boleh brur!
6. nirCMD, apa tuh? ni yg gw sebut sebagai external application. yang bakalan membantu kite dalam mengeksekusi perintah remote via browser.

gw yakin

no 1-5 dah banyak yang familiar, khusus bwat no 6 bisa lu liat info selengkapna, tentang kegunaan tool yang satu ini, disini ni:

http://nircmd.nirsoft.net/

intina nirCMD merupakan command line tool, bwat mempermudah user menggantikan perintah CMD bawaan windows, sori bwat sample na gw ambil OS na windows yak! Tapi ntar kedepanna, gw bakalan kasi juga tutorial bijimane melakukan simulasi remote sistem ini under Linux Sistem, Ubuntu misalna.

Designing Interface

Buka photoshop, bwat dokumen baru secukupna

bikin layer baru, pencet [CTRL+SHIFT+N], tros pencet lagi [ALT+BACKSPACE], warna na bebas dah!

baru dah kasi dikit gradasi, bisa lu donglot gradasi style na di file tutorial nyang lu plototin ini ni… kakakakaakakakw

bwat ilustrasi, lu bisa make icon bwat eksekusi perintah command na ntar. disini gw make icon bwat restart, shutdown, ama open-close CD-ROM

dengan sdikit teknik refleksi, duplikat ketiga objek diatas, tros transform vertikal ke bawah ye

kesan refleksi na gw pake cara ngapusin tu bawah ikon ikon na make eraser tool.

tros kurangin opacity icon duplikatna jadi 40%

tros lu slice dah ketiga objek ikon na

pencet [CTRL+SHIFT+ALT+S], atow lwat menu File > Save for Web

pake settingan kayak dibwah ini

pencet Save kalo udah, option save na kayak dibwah ini

woke bruder! lu bakalan dapet gambar bwat layoutna, terakhir save as juga bwat backgroundna, lu bisa hidden layer lainna bwat nyimpen background gradasi di belakagna, ntar kite bakalan pake bwat background panel control na.

HANDCODED HTML+CSS

lumayan bwat pemanasan, hihi….

tenggak kopi lu, isep tu rokok,.. hahahahha lu buka dah dreamweaver na, bikin manajemen situs baru, di folder webserver apache lu. folderna bebas bebas aja dah, suka suka lu

woke! layout ini kayak biasa aja dah, ada HTML ama CSS na. tapi format HTML yang kite pake yakni extensi *.PHP

ni bwat CSS na (style.css)

body { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; background:#FFF; margin-top:30px; padding:0; }
.float { float:left; }
#mainBox { width:504px; height:360px; margin:0 auto; background:url(../image/bg.jpg) 0 0 no-repeat; }
#panelBox { width:416px; padding-top:66px; top:66px; margin:0 auto; }
#panelBox img { border:none; }

#panelBox #restart { width:150px; height:212px; cursor:hand; cursor:auto; }
#panelBox #cd-rom { width:122px; height:212px; cursor:hand; cursor:auto; }
#panelBox #shutdown { width:144px; height:212px; cursor:hand; cursor:auto; }

dan ni HTML na (index.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Base Controller System with NirCMD</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="mainBox">
<div id="panelBox">
<div id="restart" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to reboot ?');if(cf)window.location='?a=restart';return false;"><img src="image/restart.jpg" /></a></div>
<div id="cd-rom" class="float"><a href="?a=cdrom"><img src="image/cd-rom.jpg" /></a></div>
<div id="shutdown" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to turn off ?');if(cf)window.location='?a=shutdown';return false;"><img src="image/shutdown.jpg" /></a></div>
</div>
</div>
<div style="text-align:center;">
<h3>Command Status disini</h3>
</div>
</body>
</html>

ga ada pertanyaan kan? hihii.. sejauh ini editing layout nyampe sini berur! lanjot ke tahap berikutna, coding!!

HANDCODED PHP SCRIPT

kalo gw c, rokona dah wabis dari tadi ni, gw sulut lagi yak!

hahahha….

perlu gw tegasin, sebelum membuat script berikutna, ada baikna lu buka file help penggunaan command nirCMD, dalam tutorial ini file help nirCMD dah gw sertain juga.

<?php
//directories system
define("_BASE_DIR", realpath(dirname(__FILE__))."/");
define("_ABSOLUTE_PATH", "/wbcs-NirCMD/");
define("_BASE_URI", "http://localhost");
define("_URL", _BASE_URI._ABSOLUTE_PATH);

//nircmd
if(strpos($_SERVER['HTTP_USER_AGENT'], 'Windows')  !== FALSE)
{
	define("_NIRCMD_EXEC", str_replace('/', '\\', _BASE_DIR.'nircmd\nircmd.exe'));
}
else
{
	define("_NIRCMD_EXEC", str_replace('\\', '/', _BASE_DIR.'nircmd/nircmd.exe'));
}
define("_CDROM_DRIVE", ""); //if you don't know drive letter of remote CD-ROM, just leave empty named constant
define("_IS_REMOTE_ACTIVE", false);
define("_REMOTE_IP", "192.168.1.17");
define("_COMPUTER_NAME", strtoupper(gethostbyaddr(_REMOTE_IP)));
?>

pada komentar //directories system, gw tentuin definisi konstanta bwat direktori aplikasi lu di web server, disini gw make __FILE__ bwat definisi _BASE_DIR, dan beberapa defini lainna

sedangkan pada komentar //nircmd, lu bisa liat ada defnisini _NIRCMD_EXEC, sebagai konstanta dari lokasi tool nirCMD berada, dalam konteks ini gw taro nirCMD.exe di folder nircmd

khusus bwat definisi _CDROM_DRIVE, _IS_REMOTE_ACTIVE dan _REMOTE_IP hanya bwat opsi tambahan aja, defaultna, lu bisa pake seperti di script atas

kayak psen yg gw tarok sebage komentarna //if you don’t know drive letter of remote CD-ROM bal bla…, nyang kire kire artinye, kalo lu ga tawu drive letter CD-ROM pada remote system targetna, lu boleh kosongin

cuma kite punya planning, kalo _IS_REMOTE_ACTIVE bernilai true, maka aplikasi akan menjalankan command untuk me-remote system dalam jaringan LAN, yakni melalui definisi _COMPUTER_NAME. disni lu bisa liat ada baris gethostbyaddr, ntu bwat mengkonvert IP menjadi nama komputer yang bakalan diremote dalam koneksi jaringan lokal.

tros kalo _IS_REMOTE_ACTIVE bernilai false, maka _REMOTE_IP dan _COMPUTER_NAME bakalan diabaikan nilai konstantana. ni artina, command yang akan dijalankan aplikasi hanya bwat system komputer lokal, dimana tempat lu ngetik saat ini.

Nah, lanjot ye! kite bakalan bikin class baru bwat aplikasi kite, ada tiga fungsi pada class yang bakalan dipake bwat mengeksekusi perintah remote command ke system, melalui perantara nirCMD console

• restart() bwat merestart remote system, command line yang dijalanin pada fungsi ini adalah:
  exitwin reboot

• shutdown() bwat men-shutdown remote system, command line na:
  exitwin poweroff

• cdrom() bwat membuka dan menutup drive CD-ROM pada remote system, command line na:
  cdrom open
  cdrom close

ni script lengkap na file nircmd.php

bwat class baru namana, nircmd.php atau lu bisa sesuaiin dengan gaya coding lu, bisa juga make fungsi dowank.

<?php

class nircmd
{
	function alert_url($msg, $url)
	{
		$alert = "<script>alert(\"$msg\");window.location='".$url."';</script>";
		return $alert;
	}
	function restart()
	{
		if(_IS_REMOTE_ACTIVE == true)
		{
			$remoteParameter = 'remote \\\\'._COMPUTER_NAME.' ';
		}
		$cmd = '"'._NIRCMD_EXEC.'" '.$remoteParameter.'exitwin reboot';
		$output = system($cmd);
		echo '<p>Command: <pre>'.$cmd.'</pre></p>';
	}
	function shutdown()
	{
		if(_IS_REMOTE_ACTIVE == true)
		{
			$remoteParameter = 'remote \\\\'._COMPUTER_NAME.' ';
		}
		$cmd = '"'._NIRCMD_EXEC.'" '.$remoteParameter.'exitwin poweroff';
		$output = system($cmd);
		echo '<p>Command: <pre>'.$cmd.'</pre></p>';
	}
	function cdrom()
	{
		if(!isset($_SESSION['ROMSTATUS']))
		{
			$_SESSION['ROMSTATUS'] = 'open';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_mount.png">';
		}
		elseif($_SESSION['ROMSTATUS'] == 'open')
		{
			$_SESSION['ROMSTATUS'] = 'close';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_unmount.png">';
		}
		elseif($_SESSION['ROMSTATUS'] == 'close')
		{
			$_SESSION['ROMSTATUS'] = 'open';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_mount.png">';
		}

		if(_IS_REMOTE_ACTIVE == true)
		{
			$remoteParameter = 'remote \\\\'._COMPUTER_NAME.' ';
		}
		$cmd = '"'._NIRCMD_EXEC.'" '.$remoteParameter.'cdrom '.$_SESSION['ROMSTATUS'].' '._CDROM_DRIVE;
		$output = system($cmd);
		echo '<p>Command: <pre>'.$cmd.'</pre></p>';
	}
}
?>

khusus bwat fungsi cdrom() ada tambahan kondisi, karena kite punya dua macam perintah command bwat cdrom na, yakni open dan close CD-ROM

jadi kite bisa make session bwat mendeteksi apakah saat ini CD-ROM sedang open atau close

if(!isset($_SESSION['ROMSTATUS']))
		{
			$_SESSION['ROMSTATUS'] = 'open';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_mount.png">';
		}
		elseif($_SESSION['ROMSTATUS'] == 'open')
		{
			$_SESSION['ROMSTATUS'] = 'close';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_unmount.png">';
		}
		elseif($_SESSION['ROMSTATUS'] == 'close')
		{
			$_SESSION['ROMSTATUS'] = 'open';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_mount.png">';
		}

woke! jangan bingung dulu, perhatiin langkah berikutna. di file index.php kite bakalan panggil config.php dan nircmd.php

session_start();
ob_start();

include "config.php"; //panggil lokasi file config.php
include "class/nircmd.php"; //panggil lokasi file nircmd.php

$n = new nircmd; //ni diperlukan bwat class nircmd yang udah lu bikin diatas

selanjutna gunakan $n bwat manggil fungsi-fungsi dalam class nircmd

contoh:

• $n->restart(); //bwat merestart system
• $n->shutdown(); //bwat men-shutdown system
• $n->cdrom(); //bwat open dan close drive CD-ROM

saat na masang parameter URL bwat pemilihan kondisi halaman, yakni bwat icon restart, shutdown dan cdrom

kasi link na kayak gini:

<div id="restart" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to reboot  ?');if(cf)window.location='?a=restart';return false;"><img src="image/restart.jpg" /></a></div>
   	  	<div id="cd-rom" class="float"><a href="?a=cdrom"><img src="image/cd-rom.jpg" /></a></div>
  	  	<div id="shutdown" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to turn off  ?');if(cf)window.location='?a=shutdown';return false;"><img src="image/shutdown.jpg" /></a></div>

parameter URL yang kite pake adalah "a", nantina bakalan kite seleksi nilai dari parameter "a" ini di pemilihan kondisi halaman.

woke, bwat mempermudah, lu bisa pake switch bwat pemilihan halamana, apa itu switch dalam PHP? baca disini:

http://id.php.net/manual/en/control-structures.switch.php

dan ini implementasi dari pemilihan kondisi halaman na:

<?php
$a = $_REQUEST['a'];
switch ($a)
{
	case 'restart':
		$n->restart();
		break;
	case 'shutdown':
		$n->shutdown();
		break;
	case 'cdrom':
		$n->cdrom();
		break;
}
?>

ok berur!????

jadi lengkapna, file index.php kayak gini sekarang:

<?php
session_start();
ob_start();

/**
#
# Web Base Controller System with NirCMD
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Web development and design service => info@dremi.net
# Website http://dremi.info http://dremi.net
# License: GPL
# File: index.php
#
**/

include "config.php";
include "class/nircmd.php";

$n = new nircmd;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Base Controller System with NirCMD</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="mainBox">
	<div id="panelBox">
    	<div id="restart" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to reboot  ?');if(cf)window.location='?a=restart';return false;"><img src="image/restart.jpg" /></a></div>
   	  	<div id="cd-rom" class="float"><a href="?a=cdrom"><img src="image/cd-rom.jpg" /></a></div>
  	  	<div id="shutdown" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to turn off  ?');if(cf)window.location='?a=shutdown';return false;"><img src="image/shutdown.jpg" /></a></div>
    </div>
</div>
<div style="text-align:center;">
<h3>
<?php
$a = $_REQUEST['a'];
switch ($a)
{
	case 'restart':
		$n->restart();
		break;
	case 'shutdown':
		$n->shutdown();
		break;
	case 'cdrom':
		$n->cdrom();
		break;
}
if(isset($a))
{
	echo '<p>COMMAND STATUS: <b>Executed!</b></p>';
	echo '<p>ROM STATUS: '.$_SESSION['ROMIMG'].' '.$_SESSION['ROMSTATUS'].'</p>';
}
?>
</h3>
</div>
</body>
</html>
<?
ob_end_flush();
?>

liat, dipaling akhir sekarang ada baris ob_end_flush();

ntu bwat mematikan buffer session yang dibuat oleh halaman index.php dan class pada nircmd.php

pelajari disini:

http://id.php.net/manual/en/function.ob-end-flush.php

ni die tampilan awal index.php kalo di preview di design layout dreamweaver

hehehe, tinggal lu coba dah di browser, buka URL aplikasi lu:

http://localhost/wbcs-NirCMD/index.php

URL na ga usah bingung donk, sesuaiin dengan folder aplikasi yang lu buat tadi di manajemen situs dreamweaver na.

TESTING

coba lu test, klik icon CD-ROM dulu, sebelum nantina kudu lu coba link icon restart dan shutdown na

KETERANGAN

bwat awal awal ujicoba, pake settingan false dulu bwat definisi _IS_REMOTE_ACTIVE pada file config.php

jadi lu bisa langsung liat hasil eksekusi perintah nirCMD dalam delay yang kagak terlalu lama. beda dengan menggunakan _IS_REMOTE_ACTIVE sebagai true, maka command remote system sesuai IP yang dijadiin target akan dieksekusi. dan ini memakan waktu terkadang delay 5-10 detik, tergantung kondisi jaringan LAN punya lu.

ni video saat PC dr.emi gw remote menggunakan aplikasi web based yang baru aja kite bikin ini.

bwat struktur file aplikasi, lu bisa donglot script lengkap pada tutorial ini…

woke bruder!!! tengkyu berat dah mau baca tutorial acak kadut gw dan semrawut ini. diskusi kite terbuka di FaceBook dremi.INFO atau di forumna.

Share on Facebook

This tutorial represents the second installment of a tutorial over at our friends PSDTUTSPLUS! In part one, we learned how to create this shiny chain from scratch in Photoshop. In this tutorial we’ll take that shiny new chain and weather, distress, and age it using layer styles, textures, and lighting effects to create our final result.

As a bonus, one lucky person will win a free Premium Membership to PSDTUTSPLUS by commenting on this tutorial!

So let’s get started!

Author: FuelYourCreativity.Com

Step 1

Download this zip file. Contained within this file are the four files:

• chain.psd – a half-sized and flattened version of the PSDTUTS final product.
• rustpattern.png – a tile able pattern
• rust.,jpg – a rust texture image from ZENTEXTURES
• chain-final.psd – end result from this tutorial.

Open “chain.psd” and “rust.jpg” and leave “rustpattern.png” for later in the tutorial.

Step 2

First we want to desatureate rust.jpg by pressing Cmd/Ctrl+U and moving the Saturation slider all the way to the left.

Step 3

Drag rust.jpg into “chain.psd”, move it to the top most layer and name it, “top”.

Step 4

Change the “top” layer’s “Blend Mode” to “Overlay”

Step 5

Create 3 new layers and name them, “fx base”, ” fx top” and “fx bottom”
and move each one to just above it’s link counterpart as seen below.

Step 6

Select the “fx base” layer and Cmd/Ctrl-click on “base link” to get a selection.

Step 7

Change your foreground color to “333333?, fill the selection by pressing Opt/Alt+Del/Backspace and change this layer’s Blend Mode to “Multiply”.

Step 8

Repeat this process with “fx top” and “fx bottom”. For layer “fx top”, Cmd/Ctrl-click on “top link”, fill with gray and change the Blend Mode to “Multiply”. Now do the same for “fx bottom”.

Step 9

Let’s go back to layer, “top” and turn the “Blend Mode” back to normal.

What we’re going to do next is create a new “Channel” to use as a “bump map” for our Lighting Effects. We’ll get to that in a moment but first, open your “Channels” by going to Window > Channels.

Step 10

Right-click any of the Red, Green or Blue Channels. and select, “Duplicate Channel…”. Name this new channel, “bump” and click back on the “RGB” channel.

Step 11

Turn the “top” layer’s Blend Mode back to “Overlay”

Step 12

Select the “fx base” layer and go to Filter > Render > Lighting Effects

Step 13

Change the “texture Channel to “bump” and rotate your lighting to match the image below. (It doesn’t have to be perfect, just make sure the light source is coming from the top left) Click, “Ok”.

Step 14

Select “fx top” and hit Cmd/Ctrl+F (repeat last filter) and do the same for “fx bottom”.

Step 15

Next we’re going to create a texture pattern to give our chain some real depth. Open the third and final file of the previously downloaded zip file, “rustpattern.png”

Step 16

Press Cmd/Ctrl+A to select all and go to Edit > Define Pattern… and press “Ok”.

Step 17

We’ll go back to our “chain.psd” and select the “fx base” layer. Apply a “Bevel and Emboss” by Double-clicking on the “fx” icon at the bottom of your layers palette, or going to Layer > Layer Style > Bevel and Emboss…

Step 18

Change the settings in the Bevel and Emboss dialog box to match the image below.

Step 19

Select the “Texture” box and change the Scale to “30?, “Depth” to “9?, and in the “Pattern:” drop-down select the pattern we created in step 16. Leave the Layers Style dialog box open and move on to the next step.

Step 20

In the Layer Style dialog box click on “Color Overlay” and chance the “Blend Mode” to “Linear Dodge (Add)” and change the color to “864719?.

Step 21

The final Layer Style will be “Inner Glow” change these settings to match the image below with a color of “573f29? Now we can click “OK” and close Layer Styles

Step 22

Apply this Layer Style to “fx top” and fx bottom” by right-clicking on “fx base” and selecting “Copy Layer Style”

Step 23

Now paste this layer style on the other 2 layers by right-clicking and choosing “Paste layer Style”

Step 24

Create a new layer above “fx base” layer as seen below and name it “shadows”. Press Cmd/Ctrl+Click on the “fx base” shape layer to get a selection.

Step 25

Press Shift+M until we have our “Elliptical Marquee Tool”. We want to subtract a portion of this selection. Press and hold Opt/Alt. We can see that the minus sign is visible which tells us we’re going to subtract from this selection. Now simply drag your marquee on both sides of our original selection to subtract it from either side until you end up with a selection looking like the image below.

Step 26

Press Shift+F6 or go to Select > Modify > Feather and feather our selection by 15 pixels.

Step 27

To fill our feathered selection with black press “D” to get our foreground and background to their default state. Then press Opt/Alt+Delete/Backspace to fill with background, and deselect by pressing Cmd/Ctrl+D.

Step 28

With the “shadows” layer selected, Cmd/Ctrl-click on the “fx base” layer to make a selection. Then go to Layer > Layer Mask > Reveal All to create a mask layer.

Step 29

Fill the mask by pressing Cmd/Ctrl+Del/Backspace to fill with background, Cmd/Ctrl+I to invert, and then Cmd/Ctrl+D to deselect.

Step 30

Change the Blend Mode to “Overlay”.

Conclusion

Click here to see the final result!

If you liked this tutorial, head over to PSDTUTSPLUS and check out part one where you will create the shiny chain elements that we started off with in this tutorial. An extensive tutorial employing several different styles and techniques that you’ll be able to use in other designs you create!

Contest Info:

• One lucky person will win a Premium 6-Month Membership to PSDTUTSPLUS!
• Just post a comment about this tutorial below
• Contest ends on Monday December 7th (5pm EST).

Sources

The “rust.jpg” image comes from ZENTEXTURES and “rustpattern.png” was created from this texture as well.

Further Reading

Check out this other great tutorial over at Fuel Your Interface, “How To Use Textures (Better Than You Used To)”

Share on Facebook

First is create your new Photoshop document. The size is up to you brother !

Step 1

Use shapping tool to grab a rectangle as your base screen of monitor. Take look my setting:

and I use #1a1a1a as base color. Give name for your shapping as "base"

Step 2

Select base path using Direct Selection Tool, and activate Add Anchor Point Tool. We will modify the bottom side of base shapping.

Now click one at the center of bottom side of base path. Move it to down side, approximately 30px.

Step 3

Repeat Step 2 for top side of base path. But on this step, move new anchor to up side, approximately 10px – 15px. The result showed on this screen shoot:

Step 4

Now press [CTRL+Click] at base path layer and activate Selection Tool with Intersect With Selection option. Select about 50px of your current selection area. You will get new selection.

Then chose menu Select > Modify > Contract : 2px, fill selection area with color #5e5e5e. Create new layer then change layer name as "top-shadow".

Go to Menu Filter > Blur > Gaussian Blur. Give it about 2px.

Let’s change blending option of top-shadow layer to Screen.

Step 5

Press [CTRL+Click] again on base path to make a selection area, create new layer called as "top-line". Chose menu Select > Modify > Contract : 2px. Fill selection area with color #ffffff.

Still on selection area, now move selection area to down side, it’s about 2px. Then hit [DELETE] button. You will see a line at top side of base path. Give it Gaussian Blur about 2px.

Step 6

Now duplicate your base path as screen layer, don’t forget to change screen shapping color to #ffffff.

Activate Direct Selection Tool. We wil make screen path smaller than base path.

Use Direct Selection Tool to select all anchor point at the bottom side if screen path. Then move it to top side. Like showed on this screenshoot:

Select another anchor point and move it to inside.

Step 7

Ouke, now delete two anchor point that located on top side and bottom side of screen path. Use Delete Anchor Point Tool to delete it.

Step 8

Repeat Step 4 to create bottom-shadow of base path

Step 9

Now press [CTRL+Click] again on base path, then chose Selection > Contract 2px. Fill selection area with color #ffffff.

Chose Selection > Contract again, and give 1px. Hit [DELETE] button. You will see stroke line inside of base path.

Chose Filter > Blur > Gaussian Blur 2px. Change blending option of layer as screen.

Untill this step, let’s review your design. Hmm…. not so bad but to make better screen, add some layer style for screen layer.

Nice !

Then add a glossy effect for screen using transparent gradient.

Step 10

Ouke! let’s illustrate a transparent glasses at the bottom of base and screen layer.

You may duplicate base path, and make it looks likely this screenshoot:

I give name of this path as "bottom-glasses". Now duplicate bottom-glasses and move it to top about 5px

Step 11

I use gaussian blur to create blue light at the bottom of base path

Step 12

Create a text for "SyncMaster 933SN" then add stroke layer style for 1px with color #000000.

To make a little bit of shiny effect. I create a star using 1px vertical and horizontal selection or you may use brush tool.

Step 13

Add a text for "S MSUNG". Note: I use "V" text and transform vertical it to get the real SAMSUNG text

Take look this screen shoot.

Step 14

We will create elipse to complete our monitor

Use Elipse Tool then grab it with color #1a1a1a

Change layer name as "bottom-elipse"

Repeat Step 4 to create shadow

Step 15

Duplicate bottom-elipse, move it to down side about 15px

Look at left and right side of elipse, looks likely not perfect. So, use poligon lasso tool, to make it perfect.

Good ! looks likely perfect!

Step 16

Create once again for elipse at center of bottom-elipse. Then add rounded rectangle between bottom-elipse and bottom-glasses.

Good job ! now you has finished to illustrate Samsung Monitor – SyncMaster 933SN Series.

You may add you desktop screenshoot into screen. Take look this one!

And add reflection effect to make it cool illustration

Is that a sexy girl ??? hahahahahahahahaa…..

Just for have fun friends, thank for read my tutorial.

Share on Facebook

Yang lu perlukan adalah:

-Photoshop
-HTML+CSS
-jQuery Ajax
-PHP

Part I Designing Website Layout

Buka Photoshop lu, bikin ukuran kanvas kaya gini:

Pilih Rectangle Marquee Tool, bikin objek header ke gini:

Apply beberapa layer style :

Liat dlu hasilna

Sekarang bikin garis berwarna putih make single row marquee tool, antara gradien dan drop shadow. fill line make warna putih

Gunakan rounded rectangle tool bwat mbikin navigation button, gunakan radius sesuai keinginan lu

apply layer style

Semua gradien ada dalam paket download tutorial na

Pencet [CTRL+Click] pada layer navigation button, bwat mbikin seleksi sekitar button.

Pilih seleksi Eliptical Marquee Tool dengan option option : Intersect with selection. Truzzz buat seleksi oval diatas seleksi sebelumna

Lu bakalan dapet hasil seleksi ke gini

Pencet [CTRL+D] bwat Deselect

Tros transform objek na vertikal, dengan mencet [CTRL+T] -> Flip Vertical

Pilih menu Filter > Blur > Gaussian Blur. Kasiin 2 px radius.

dan ubah blending layerna menjadi Overlay

Kasi text button na juga

Lu bisa group ksmua layer navigasi ke dalam satu group, dan duplikat gorup na mnjadi beberapa group

Hampir selesai layoutna, kasiin objek icon dan text sebagai title web na

Terakhir bikinin footer dengan cara sederhana kaya mbikin header

Review dlo hasil akhir layout na

Part II Slicing Images

Bagian ini kita bakalan ambil gambar tertentu saja, ambil bagian na dengan slicing tool yang nantina bakalan diperlukan bwat bikin code CSS na

Pertama adlah slice navigasi

Pilih File > Save for Web and Device

Inget ye: pilihna nyang Selected Slice dowank

Selanjutna terusin ke slice berikutna, kaya bg-header, bg-footer dan logo

Jadi lu bakalan dapet beberapa images yang dibutuhkan dalam coding CSS na

Part III Make HTML+CSS Code

Bwat mbikin web lu knceng di load saat dibuka di browser, Less Table adaalh salah satu cra terbaik

Gw paling suka bagian ini, buka Dreamweaver lu, bikin file CSS

Nah ini code CSS na:

  <style type="text/css">
html,body{
margin:0;
padding:0;
border:0;
/* \*/
height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
body {
background:#ffffff url(images/bg-header.gif) 0 0 repeat-x;
color:#000000;
min-width:960px;
}
#mainPan {
width:960px;
position:relative;
margin:0 auto;
}
#bodyPan {
width:960px;
margin:0 auto;
}
#headerPan {
width:960px;
height:127px;
margin:0px;
padding:0px;
}
#headerPan img.logo {
border:0px;
width:148px;
height:69px;
margin-left:20px;
margin-top:10px;
}
/* MENU TAB NAVIGATION */
#tabs {
line-height:normal;
top: 25px;
right:10px;
position:absolute;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
float:left;
background:url(images/bg-navigasi.gif) no-repeat left top;
margin:0;
padding-top:10px;
text-decoration:none;
width:137px;
height:59px;
text-align:center; /*for IE + FF right here*/
}
#tabs a:hover {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color: #FFCC00;
}
.spacer {
margin-bottom:20px;
}
/* CONTENT */
#contenPan {
font-size:11px;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
width:960px;
margin:0px;
}
#contenPan h2 {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#006699;
}
#contenPan a {
color:#0066CC;
text-decoration:none;
}
#contenPan a:hover {
color: #FF0000;
text-decoration:none;
}
/* FOOTER */
#footerMainPan {
position:relative;
clear: both;
width:100%;
height:138px; /*for FF add 10px;*/
overflow:hidden;
background:url(images/bg-footer.gif) 30px center repeat-x;
text-align:center;
}
#footerPan {
padding-top:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #666666;
width:960px;
height:88px;
background: url(images/cutter.gif) right top no-repeat;
margin:0px;
}
#footerPan a {
color: #0099FF; text-decoration:none;
}
#footerPan a:hover {
color: #333399; text-decoration:none;
}
</style>

save dan kasi nama style.css

sekarang kite bakalan mbikin index.html

dan ini code ma:

<div id="mainPan">
<div id="bodyPan">

<div id="headerPan">
<img src="images/logo.gif" class="logo" />
<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">AJAX</a></li>
</ul>
</div>
</div>

<div id="contenPan">
<h2>Heloo....</h2>
<p>This is main Content <a href="#">[link]</a></p>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
</div>

</div>

</div>
<div id="footerMainPan">
<div id="footerPan">
&copy; 2008 Web Design Ajax jQuery.
<a href="http://www.psdremi.co.cc" target="_blank">
PSDREMI.CO.CC
</a>
</div>
</div>

Gw rasa cuma sgitu code na, gw yakin lu bakalan familiar kok

Part IV Adding jQuery Ajax Scripts to Load Contents

Lu pada tau jQuery kan ? kalo belom, baca pengenalan tentang jQuery dlo yak di web na

Pada bagian ini kita butuh jQuery script library, sedangkan plugin ga diperlukan.

Cuma kasi baris ini di HTML na, bwat ngeload jQuery Javascript Library na

<script src="jquery-1.2.6.js" type="text/javascript"></script>

dan kasi code javascripts bwat mbikin fungsi untuk meload external content pada contentPan Div

<script type="text/javascript">
$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html('<p><img src="images/ajax-loader.gif" /></p>');
});
$("#ajax_display").ajaxSuccess(function(){
$(this).html('');
});
$("#ajax_display").ajaxError(function(url){
alert('jQuery ajax is error ');
});
});
function loadContent(id) {
$("#contenPan").hide();
$("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);
}
function callback() {
$("#contenPan").show();
}
$(document).ready(loadContent(id));
</script>

Simple line:

  $(this).html('<p><img src="images/ajax-loader.gif" /></p>');

/*this line will load the ajax-loader.gif while progress on request*/

dan code berikut ini diperlukan bwat memanngil data content

  function loadContent(id) {
$("#contenPan").hide();
$("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);
}
function callback() {
$("#contenPan").show();
}

php-loader.php adalah file PHP yang bertugas memberikan value dalam bentuk HTML, value ini akan direquest oleh jQuery Ajax untuk di load ke contentPan Div

Kalo lu liat pada akhir variable GET na berupa variable cPub, maka kita bakalan bikin file PHP yang menggunakan kondisi pemilihan variable GET, ni code na:

<?
$allCount = 60; //just to simulation for data ready
if($_GET['cPub'] == 2)
{
echo "<h2>Photoshop</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is Photoshop Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 3)
{
echo "<h2>CSS</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is CSS Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 4)
{
echo "<h2>PHP</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is PHP Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 5)
{
echo "<h2>AJAX</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is AJAX Content. ";
}
echo "</p>";
sleep(2);
}
else
{
echo "<h2>Home</h2>";
echo "<p><a href=''>this is a link</a></p>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "Welcome back friend ! this tutorial explain about how to designing web layout with Photoshop+CSS and then using Ajax jQuery to implementad how to Load PHP Content. ";
}
echo "</p>";
}
?>

Gw pake sleep(2) bwat mensimulasikan loading content yang cukup lama

Kayakna smua udah lengkap, tinggal lu upload ke webserver biar PHP na bekerja. ni screen shoot na

Tutorial ini gw input juga dalam bahasa inggris di PSDREMI.CO.CC dan Good-tutorials.Com

Best Regard, dr.emi

Share on Facebook

Gw sering merindukan saat saat metal dan techy design style masih berjaya beberapa taon silam, tapi kini cuma tinggal kenangan, beberapa master dunia untuk spesialis techy style pun udah mulai mengundurkan diri dan ada yang beralih ke Style Web 2.0

Yah! Web 2.0 tidak lebih dari hanyalah sebuah kombinasi gradasi, “No More Than Just Gradient”

Selain lebih sederhana dan indah dipandang mata, design Web 2.0 terkesan elegan dan karena less table serta fast access lah yang mbikin era nya mampu meruntuhkan era design metal dan techy yang menurut amatiran sangat berat diakses dan sering memakan bandwidth. Tapi lain lagi bagi designer sejati, metal dan techy dianggap sebagai idealisme dan prinsip hidup dalam berkreasi.

Woke, sudahlah sekarang gw mau ngasi tutorial baru, dan thanks bwat member sejati dremi.info. Mudah2an bisa bwat inspirasi.

Bwat sebidang canvas area, ukuran 300 x 300 px. Bikin shapping make elipse tool

kasiin style pada layer na

bikin satu shapping lagi, di pojok kiri atas

kasi style juga

Bwat satu shapping lagi, tapi kali ini shapping na lu edit lagi sesuai titik pada tanda lingkaran, gw pake direct selection tool bwat ngedit titik2 shapping na

wabis ntu kassin style na

tepat diatas objek objek sebelom na, lu kasiin bidang berwarna putih make eliptical marquee tool

kurangi opacity na jadi 25%

bikin satu lagi tapi kali ini kasiin gradasi transparent putih dari atas ke bawah

kurangi opacity na menjadi 77%

jadi dah, kassin text na “dreTechnology”

nah ni nyang make sedikit sentuhan filter lightning effect

Share on Facebook

hei kawand kawandh !!! kopi malam ini serasa enak banged, ni ada tutorial basic bwat newbie photoshop cara menggunakan pencil tool bwat bikin detail button. gw tepati janji gw bwat perbanyak tutorial photoshop bwat newbie juga.

huoke ! bikin canvas kecil aja, ukuran sekitar 200 x 100 pixel, backgorund na putih

kalo udah HAJAR tombol OK na !! )

sekarang siapin rectangle tool (U)

wabis ntu lu tarik dah bidang na di canvas kosong lu

ubah nama layer nya "dasar", dengan double klik di text shape pada layer

pilih menu Layer > Layer Style > Color Overlay

kasi warna biru / sesuka lu

Dengan Zooming tool, gedein objek area lu

tros pencet KIBOR lu [CTRL+Click] pada Layer, nah ini bwat mbikin seleksi di sekitar bidang shapping lu

wabis ntu lu aktifin tool Eliptical Marquee na:

tros atur setting na menjadi intersect with selection

nah lu klik dan drag aja dah di sebagian area seleksi persegi yg terbentuk sebelum na

jadi lu bakalan dapet seleksi kayak gini mbro )

sekarang bikin layer baru lewat menu : Layer > New Layer, kasi nama layer "shadow"

tros lu aktipin tool gradient na, set menjadi transparent putih, dan klik + drag gradasi na mengikuti arah panah pada area seleksi

kurangin opacity layer na menjadi 75 %. woke, jadi dah efek shadow na )

sekarang ambil tool brush, ukuran nya: 3 px aja dan bikin layer baru namanya "botline" tarik dari kanan ke kiri pada area button

tros kasi filter blur, pilih menu Filter > Blur > Gaussian Blur, dan kasi radius 1.5 px

hapus ujung kiri na make eraser tool

ubah opacity layer na menjadi 62 % dan blending layer Overlay

sekarang ambil pencil tool, berukuran 4 px dan warna putih, bikin 3 buah titik pada layer baru bernama "dot sign"

nah lo, wabis ntu kasiin aja layer style, drop shadow ama color overlay

tros kasi teks na, gw make ini ni: ACKNOWTT.TTF bwat font na. klik aja bwat donlot

wabis ntu lu kasiin dah style drop shadow dikiiiiiiiiiiiiiiiiiiiiiiiit aja bwat teks na

terakhir ambil lagi pencil tool lu, pake size 1 px dan warna item dah, bikin layer baru nama na detail stroke, tros lu klik dan drag mengelilingi pinggiran button lu

jadi ke gini dah

nah untuk merubah warna lu bisa ganti layer style untuk color overlay na pada layer dasar na

Share on Facebook

balik dari rumah cewe gw, kembali ke kosan di bandung. baru dah gw bisa cek cek email and web lagi. met idul fitri 1429 h ye …

kreasi seni semakin ga ada matina, gw sndiri akhir2 ini terus mendapat banyak inspirasi, salah satuna adaalah dari casing baru gw Simbadda SimCool 802. beberapa hari menjelang lebaran, power supply gw bermasalah, yaahh mumpung ada duit gw ganti aja sekalian ama casing na, biar sirkulasi udara dan performa cpu gw makin mantab…

seperti biasa gw ga beli baju / pakaian baru stiap kali lebaran, akhirna gw tambahin memory aja dah bwat PC tercinta gw, tmen sejati di kala susah dan senang. …

alhamdulillah, projek di pasca lebaran ini, lumayan, baik yang dari kantor maupun dari stand alone corner dr.emi creative design (mypsd2cms.com) sndiri, rejeki datang bergantian, adsense bulan ini pun nambah drastis… perkiraan gw, mungkin karena adanya blog baru gw di psdremi.co.cc yang udah masuk direktori good-tutorials.com dan beberapa blog baru gw yang berbahasa inggris lainna. Semangat dah !!!

woke !! bwat penggemar tercinta gw, ni bwat kalian. tutorial cara membuat baling baling pada CPU Fan, yang terinspirasi dari Casing CPU baru gw )

bwat teh hangat atow kopi, sedot rokok star mild mbikin have fun pala gw siang ini…

ni hasil akhirna

bikin dokument baru ukuran 600 x 600 pixels …

ambil seleksi rectangle marquee tool, mbikin seleksi dengan fix size 100 x 80 px

dari sono, lu bisa tarik guide line na … disekitar persegi seleksi yg kbentuk

pencet [CTRL+D] dan siapkan shape tool lu.

gunakan rectangle tool, bikin seukuran dengan bidang guide line …

ubah nama layerna menjadi fan. siapkan direct selection tool

klik pada shape fan, jadi titik path na bakaaln muncul.

beralih ke add anchor point tool, klik sekali pada ujung atas persegi shape, dan drag ke arah atas titik yg muncul na

ni hasil na

perhatikan titik path persegi kiri bawah dan kanan bawah, drag ke arah dalam, biar bentunya perspektif

woke ga ?

selanjotna, gunakan convert point tool, drag ke samping bwat nglengkungin ujung diagonal kipas na

lakukan hal yang sama pada ujung satunya lagi

gunakan guide line bwat membantu arah poroporsional pada titik lengkungan

kira kira kalo pada size normal, bakalan kaya gini:

pilih menu layer > layer style > gradient overlay bwat ngasi gradient overlay kipas na

hoke !!!!

duplikat layer fan dengan mencet [CTRL+J]. tros pencet lagi [CTRL+T] bwat trasform objek duplikat layer fan

drag pusat trasform, sekitar 30 px ke bawah objek fan copy, ni biar trasform nantina terpusat di bagian bawah objek fan.

trasform angle na menjadi 72 derajat ke kanan… Kalo udah Hajar tombol [ENTER] na 2x hehe

ulangi langkah diatas bwat mbikin kipas lainna ampe tercipta 5 buah kipas

catatan: angka angle 72 derajat gw peroleh dari 360 derajat dibagi 5 buah kipas = 72 derajat

ambil elipse tool bwat bikin shape baru elipse, tepat di tengah – tengah obejk – objek kipas

letakkan pointer mouse pada tengah tengah objek kipas, tros sambil mencet [ALT+SHIFT] drag keluar bwat bikin shape elipse na, kasi nama layer dynamo

ubah layer style na

siapkan pencil tool, berwarna hitam berukuran 4px

tarik garis lurus pertama untuk sebelah kanan …

kasi nama layer, dynamo-line

duplikat ke kiri dengan posisi sejajar

lu bisa blok kedua layer (dynamo-fan dan dynamo-fan copy) atow me-merge keduana dengan [CTRL+E]

wabis ntu lu duplikat keduana dan transform bersamaan 90 derajat ke kanan

lanjot ke rangka untuk kipas na, ambil rounded rectangle tool, dengan radius 20px. bwah objek persegi yg terpusat di tengah tengah objek dynamo, menutupi seluruh objek lainna juga

siapkan elipse tool bwat motongin shape rangka kipas. ubah dlu setting shape na menjadi substract dan bikin bidang elipse tepat ditengah na juga

kasi gradient overlay yg sama dengan layer fan, cuman tambahin stroke 4px

untuk kesan bayangan, kasi objek blur di sekitar lingkaran kerangka kipas, menggunakan eliptical maquee tool

ubah forground color menjadi hitam, pilih menu Edit > Stroke, kasi nilai stroke 10px atau secukupna

deselect area seleksi dengan mencet [CTRL+D], ubah nama layerna menjadi dark-shadow

pilih menu Filter > Blur > Gaussian Blur, kasi nilai radius 10px

sekarang kita bikin screw na, bwah shape elipse baru di pojok kanan bwah kerangka kipas.ubah nama layer na screw

kasi style ke gini:

bikinin juga silang plus (+) bwat screw na, perbesar objek screw, ambil tool rectangle marquee tool. bikin persegi panjang vertical di tengah screw. dan kasi warna putih, begitu juga dengan persegi panjang horizontal na

merge kedua persegi panjang, dan kasi sdikit style :

group layer screw dan silang plus na ke dalam layer group set “screw” dan duplikat group na. letakkan hasil duplikat na di sebelah kiri atas kerangka kipas.

blok kedua layer set, dan transform ke kanan 90 derajat

bikin text SimCool, di tengah objek dynamo

untuk bagian kipas dan kerangka dah selesai, tapi ke na ukuran kipas na kurang cocok, akhirna gw gedein dah dengan free trasform pada seluruh objek fan dan dynamo

sekarang hidden layer background na, pencet [CTRL+A] dan pilih menu Edit > Copy Merge. saat na kita bikin efek refleksi na

paste di layer baru, trasform vertical, dan geser ke bawah yak !

lu bisa munculin lagi layer background na, dan perkecil hasil objek yg lu paste, dsini gw hapus bagian yang lebih na dan gw kurangin opacity layer refleksi na menjadi 12 %, jadi keliatan lebih ok efek refleksi na

jimane ? komen yak, tuangkan unek unek lu pada form komentar dibawah, apapun komen lu, bakalan gw respon dan gw terima untuk kemajuan tutorial dremi.info. dan inilah ciri khas tutorial dr.emi : inspiratif, dan selalu menggali kreatifitas dan improvisasi kalian. mainkan imajinasi dan inisiatif kalian, inilah cara gw belajar, hilangkan rasa bingung pada penggunaan tool, gunakan semua cara dan teknik dengan agresive !!! gw jamin lu pasti bisa !! jangan hanya mencoba efek efek sederhana, tingkatkan kualitas pembelajaran kalian, photoshop indonesia harus maju, harus bersaing dengan photoshop luar negeri !! ini harapan dan cita cita gw !!!

Thanks !!

Share on Facebook

Kali ini gw share hasil belajar gw dari psdtuts.com, sbuah penyedia tutorial paling keren di muka bumi, dan paling dihargai hahahaahaha….., tema tutorial tetep experimental dan belum pernah gw bikin sebelumna

Kalo sebelumna gw bikin flash disk dengan 2D, kali ini gw bikin dengan 3D, tentuna tidak semudah membuat objek 3D di Maya atow 3D Max.

Preview hasil akhir na, bwat penyemangat kalian )

tertarik kan bwat nyoba ???

Seperti biasa puter musik lu sekeras keras nya, hilangkan stress !! hilangkan beban pikiran !!! hilangkan semua yang mbikin ruwet di otak lu pada !!!

Buka Mesin Photoshop Lu… !!! bwat dokumen baru ukuran 1000 x 1000 px, background putih dan DPI na 300 pixel/inc

huoke, siapkan marquee tool na, bikin bidang seleksi, dengan Fixed size : 100 x 240 px, dan gunakan mistar guide bwat mbikin batasan setelah seleksi terbentuk

Sebelumna hilangin seleksi na dolo dengan [CTRL+D], bikin layer baru kasi nama layer “front b”

ambil shape tool, dengan mode: Fill Path.

Pencet [CTRL+T] dan Trasnform Rotate 30 derajat ke kiri. Sikat !!!! Tombol [ENTER] na wkwkwkwwkwk )

kembali [CTRL+T] kali ini pilih gunakan Skew -30 derajat, kembali HAJAR !!! tombol ENTER na, hihi )

Lu boleh trasform Rotate dan Skew sekaligus, cuman hasilna ujung shape jadi rada pecah

Sekarang duplikat layer front b atow [CTRL+J], geser sekitar 30 pixel ke kanan (atow satu kali [SHIFT+Panah ke kanan] )

Ubah nama layer hasil duplikat menjadi front a

Kasi gradasi bwat layer front a, dengan warna gradasi dari #3a3a3a ke #a8a8a8

perhatikan perpotongan kedua ujung atas dan bawah, ambil tool poligon lasso, bwat menutupi bidang yang masih terbuka, dan kasi warna sama, pada layer front b

kasi gradasi juga bwat layer front b gunakan gradasi sedikit metal untuk layer front a

pencet [CTRL+Click] pada layer front a, geser seleksi na ke kanan sesuai ukuran flash disk yg ada di imajinasi lu, bikin layer baru namanya “back-side”. Tros kasi warna grey agak muda

haha, masih lom jadi juga, ya iyaaalaaahhh kan lom apa apa, masih panjang mbro… !!!

bikin layer baru, dibawak front b, kasi nama layer body.

ambil poligon lasso tool, bikin bidang seleksi mengikuti petunjuk berwarna orange. Tros [CTRL+Click+SHIFT] pada layer back-side, nah jadi seleksi keseluruhan body bakalan kaya gini

kasi warna sama grey juga

untuk sementara hidden aja layer back-side na (hilangkan ikon mata pada layer back-side).

selanjot na, kasi gradasi ke gini bwat body na:

dengan menggunakan move tool, klik dan drag arah gradasi na biar sesua intensitas terang gelapna, catatan: teknik klik dan drag move tool ini digunakan saat jendela layer style aktif

lanjot, [CTRL+Click] pada layer back-side yg lu hidden tadi, tros geser ke kanan 30 px, bwat layer baru dengan nama back-stroke, tros kasi warna orange

dengan cara sebelumna, edit bagian ujung yang masih terbuka dengan poligon lasso tool, tentuna dengan warna yg sama

kasi style gradient overlay juga bwat layer back-stroke

sekarang kita bikin highlight na, bwat layer baru namana highlight, pake line tool, dengan w: 8 px dan warna putih

kasi Filter > Blur > Gaussian Blur, dengan radius: 4.5 px

kite bakalan ngilangin bagian nyang lebihna, [CTRL+Click] pada layer body, tros [CTRL+SHIFT+I] atow Select > Invers, pencet [DELETE] bwat ngapus bagian lebih na

[CTRL+Click] juga pada front b, dan HAJAR !!! tombol [DELETE] na

Bikin layer baru di atas layer body, dengan nama layer “reflection”

ambil gradient tool, reset gradasina make pencet tombol [D]. tarik gradasi bebas dari kiri ke kanan pada seluruh area canvas

Pilih menu Images > Adjustments > Curves, kasi setting curve kaya gini:

Trasform Rotate layer reflection 30 derajat ke kanan

[CTRL+Click+SHIFT] pada layer front a, back-side, dan body. tros [CTRL+SHIFT+I] dan HAJAR [DELETE] na

ni hasil na

Ubah blending mode na menjadi overlay dan opacity tetep 100 %

hapu dengan eraser tool, pada bagian samping yang keliatan na terlalu gelap akibat penerapan blending mode overlay

bwat layer baru namana plug, di atas layer highlight, dan [CTRL+Click] layer front ana, tros Trasnform Selection (Select > Transform Selection) menjadi lebih keci ldari layer front a

kasi warna grey muda

duplikat layer na dan geser ke kiri, ni bwat objek plug USB na

ulangi langkah sebelumna bwat mbikin body na

kasi gradasi transparent dari kiri atas ke kanan bwah

untuk refleksi na pake cara sebelumna juga

dengan gradasi metal, dari kiri kanan, dan transform rotate 30 derajat ke kanan

seperti biasa, hilangkan bagian lebih na dengan select invers dan delete, dan ubah blending mode na menjadi screen, opacity: 80 %

hapus bagian yang terlalu gelap

bwat hightlight na juga dengan ukuran 2 pixel

kasi blur juga, carana sama persis dengan mbikin highlight sebelumna

slanjotna bikin layer baru lagi, namana kali ini terserah lu dah

kasi gradasi trasparent hitem

sekarang bikin shadow item untuk bagian atas dalem na: pake poligon lasso tool

delete bagian luar na make select invers kaya tadi, dan kasiin blur, sesuaikan dengan selera lu

bikin lempengan putih na, ni bwat element PCB pada USB na

delete bagian luar na

untuk body dalem na pake poligon lasso tool juga, kasi warna grey agak terang, delete lebihna

preview hasil sementara

jimane pegel kan pinggang lu, hihi, gw aja pegel nih tengkuk na…

lanjot yak!!

sempurnakan bagian ujung na, make poligon lasso tool

Bikin kotak hitam bwat lubang plug USB na, bisa make marquee tool, kasi warna item, nama layer na “slot”

trasnform skew 30 derajat

duplikat layer slot, pencet [CTRL+U] ubah warna na menjadi putih, dan geser 1px ke kanan, hapus setengah bagian dari slot duplikat yg berwarna putih

merge kedua layer slot, dan duplikat hasil merge na, sejajarkan biar lurus

kasi text bwat label USB na

trasform skew juga 30 derajat, dan kasi drop shadow dikit

woke, group semua layer sebelumna ke dalam satu layer group

duplikat group na, dan geser ke bawah … ni bwat refleksi 3D na, kasi text juga yah

tros download USB Sign na disini dlu, untuk objek USB bayangan di bawahna

Konsentrasi pada USB BOTTOM (refleksi 3D na)

kopi paste gambar USB sign ke dalam area kanvas USB BOTTOM, dan perkecil, sesuaikan arahna

Vlip Vertical USB Sign na

Blok semua layer ujung plug, dan Trasform 180 derajat

nah lu atur dah biar objek na ga berseberangan

edit bagian ujung na, tambal make warna yg sama

tht’s good brother

woke, saat na me merge masing masing layer group, USB TOP dan BOTTOM, tapi saran gw asli na jangan di merge, mending lu duplikat ulang keduana, ni bwat master desgin USB na

dan trasform hasil merge na, bersamaan, rotate na -30 derapat (ke kiri)

sejajarkan pososi USB bwah na

untuk USB refleksi 3D yg bawah, gw kasi blur, radius: 3px

dan kurangi opacityna menjadi 40 %

ambil poligon lasso tool, bwat bikin bayangan gelap, diantar kedua USB

kasi warna gelap, dan kasiin juga blur

kurangi opacity shadow na menjadi 30 %

terakhir kasi tau tmen2 lu, bwat gabugn disini, biar bisa beljar bareng hihi,… )

alna akhir2 ini gw sedih, kanapa tmen2 yg pada baca tuts gw cuma sekedar mampir dan liat dowank, komen kek apa kek, jangan diem ajah

hoke brother !!!!

Share on Facebook

Seleksi menggunakan Magnetic Tool, Eliptical atao Rectangle Marquee Tool, adalah teknik dasar dalam belajar photoshop, nah kali ini gw kasi sedikit surprize bwat newbie. Bagaimana membuat seleksi menggunakan pen tool ? lalu bagaimana memanfaatkan nya dalam editing gambar ?

sebelumna lihat Keterangan tool ada pada Adobe Photoshop Tool Guide

simak tutorial singkat ini.

Pertama search dolo di google, cari gambar mobil dan jalanan kosong (keword na: “cars” ama “on the road”)

pesen gw, jangan pernah make gambar yang dari flickr.com / sejenisnya, karena mereka tidak mengizinkan penggunaan gambar untuk tujuan komersil.

siapkan pen tool lu, dengan mode: path, sedangkan settingan yang lainna default aja

Buka gambar mobil na, klik di banyak tempat menggunakan pen tool, pada sekeliling body mobil. pembuatan titik berakhir pada ujung titik pertama kali dibuat.

sekarang gunakan direct selection tool, untuk mempreview path area yang udah lu bikin make titik titik pen tool tadi.

dengan add anchor point tool, klik pada bagian kap mobil, untuk nambahin titik baru.

trus klik dan drag titik yang lu bikin ke arag atas, ni bwat nglengkungin dan nyesuaiin bidang kap mobil na

lakukan hal yang sama untuk beberapa titik laiinya yang lu anggap perlu menggunakan titik lengkung path

untuk menggeser titik ke posisi yang berbeda (jika pengeditan diperlukan) gunakan direct selection tool, dan untuk titik lengkungan lu bisa coba convert point tool juga. dengan klik dan drag saja sudah cukup untuk menciptakan titik lengkung )

sekarang kalo udah smua titik lu edit sesuai objek body mobil, lu klik kanan pada path na, dan pilih option Make Selection

seleksi body mobil bakalan kebentuk

pilih menu Edit > Copy atow pencet di kibod lu [CTRL+C] )

nah saat na lu buka dokumen objek jalanan kosong na, lalu pilih menu Edit > paste atow [CTRL+V] di sana

woke, sekarng pilih menu Edit > Trasnform atow [CTRL+T]

kecilin dengan klik dan drag sambil mencet [SHIFT] pada salah satu ujung objek transform mobil ke dalem

hukih !!! dikit lagi, sekarang bikin layer dibawah layer objek mobil, ni bwat objek bayangan na. kasi nama layer na “shadow”.

bikin satu seleksi menggunakan eliptical marquee tool, lalu pilih menu Select > Transform Selection, miringin dengan cara klik dan drag ke arah kiri atas.

teken [ENTER], nanti hasil seleksi na ke gini

wabis ntu pilih teken [D] bwat mereset panel color menjadi hitam putih.

lalu pilih menu Edit > Fill bwat ngewarnain bidang seleksi, hasil na akan terbentuk bidang oval berwarna hitam

pencet [CTRL+D] bwat ngilangin seleksi na

sekilas tampak kurang bermakna bayangan na, nah kasiin blur dengan memilih menu Filter > Blur > Gaussian Blur

isikan nilai radius na = 3 pixels

tros kurangi opacity layerna menjadi 13 %

selesei sudah )

Share on Facebook

Kali ini kita bakalan belajar cara membuat lipatan kertas. Sebenernye ada banyak trik / teknik dalam membwat lipatan kertas, tergantung style dan tujuan kreasina. Ada yang make seleksi, trasform warp, atau, dari seleksi di konvert ke path.

untuk sesi ini gw ambil contoh nyang paling sederhana, Trik Membuat Lipatan Kertas menggunakan seleksi. Keterangan tool ada pada Adobe Photoshop Tool Guide

Buka dokumen gambar lu, [CTRL+All] dan paste di area canvas photoshop yang kosong

Gunakan poligon lasso tool, untuk membentuk seleksi segi tiga di pojok kanan atas pada layer gambar

Tekan [DELETE] untuk menghilangkan bagian gambar yang diseleksi. Tekan [CTRL+D] atao pilih menu Select > Deselect

Bwat satu seleksi yang sama, tapi kali ini arah segitiga na berbeda.

Bikin layer baru, dan ambil tool gradasi. Atur gradasina dengan mengklik panel gradasi di bawah bar menu

klik dan drag gradasi na dalam seleksi area, dengan arah dari kanan atas ke kiri bawah

jangan lepas Men-deselect seleksi dlu, langsung pilih, Eliptical Marquee tool, dengan setting Substract From Selection (-) atao Pilih Eliptical Marquee tool lalu pencet [ALT] sambil klik dan drag untuk memotong seleksi (-)

ulangi langkah diatas sekali lagi untuk sisi kiri seleksi na

Masih pada seleksi, selanjotna, tken [CTRL+SHIFT+I] atow pilih menu Select > Inverse untuk membalik seleksi

Kalo uda, teken [DELETE], ni bwat ngilangin bagian yang kita ambil seleksi na tadi

Wukih, sekarang kasiin layer style drop shadow, Pilih menu Layer > Layer Style.

Kalo udah lu bisa kasiin warna abu bwat background layer gambar na

dan ini hasil penambahan layer style stroke untuk gambarna

Share on Facebook

ni ke na cocok bwat netter yang agi nyari2 inspirasi, hmm… seni memang indah, tidak terbandingkan nilai na dengan cabang ilmu apapun. ungkapan ekspresi ini gw tuangkan dalam tuts kali ini

bwat doku baru seukuran medium aja

ambil shapping tool, bwat bidang elipse ke gini

dengan direct selection tool, ubah bentuk beberapa titik, menyerupai bulu. ni bwat dasarna, ganti nama layer na menjadi “base”

lu miringin ke kiri

gunakan pen tool, dengan setting ke pada gambar, bwat bikin sela2 bulu na

kasiin gradient overlay bwat layer style na

kembali gunakan pen tool bwat bikin objek sisi kanan, tapi kali ini gunakan mode normal untuk shapping na

kasi gradient overlay juga

dan duplikat untuk sisi kirina

Selanjotna, duplikat layer shapping base, letakkan di paling atas, dan kecilin

lu bisa kreasiin warna gradasina, tros bikin satu objek lagi make pen tool juga, latih ketelitian lu dalam menggunakan pen tool

kasi gradasi ke layer base, tros dplikat juga untuk sebelah kiri na

terakhir lu bikinin batang bulu na, make pen tool, gunakan beberapa titik saja, sisana, lu bisa modif make add anchor pint tool / convert point tool

disini gw pakein brush item rada kabur pada layer baru, untuk membwat bayangan pada sela2 bulu na, tros gw kasiin gaussian blur 3px

tanda merah, adalah lokasi tempat ngasiin brush na

tros lu bisa modifikasi objek na dengan menduplikat ke beberapa objek, tros lu atur menjadi ke gini

wabis ntu gw bisa kreasiin dengan model2 yg laen

Share on Facebook

malem itu gw wabis chat ama salah satu tmen master design gw, ke na malem itu gw bad mud. ah ga taulah pengen bikin tutorial aja.

hunting ke blog kesukaan gw, liat2 sample design dari guru2 di luar negeri sana, jadi pengen cepet2 merealisasikan blog photoshop bhs inggris gw.

ni gw dapet belajar dari mereka, dan hasilna ga sebagus mereka, tapi gw yakin teknik ini berguna bwat netter smuah. simak tuts gw, Illustrasi Segelas Orange Jus

Bwat dokumen, berukuran 800 X 1100 pixel, dengan dpi = 300 300 pixels/inch, bikin guide untuk mistar pembantu dalam membuat objek selanjurna, pilih tool path, dengan settingan path ke pada gambar. lu bisa atur bentuk na menyerupai setengah gelas

Bwat layer baru, klik kanan pada area path, pilih Fill Path. Kasi warna #ccd9dd

Work path lu bakalan kebentuk di panel path, lalu duplikat layer na, tros trasnform horizontal. Kalo udah kebentuk gelas satu sisi dengan lainna, pencet [CTRL+E] untuk menyatukan na (merge layer)

kalo kira kira belum ngepas ama selera bentuk gelas na, lu bisa edit masing masing path na

beri nama layer glas ini sebagai “outer glass”, tros kasi layer style Gradient Overlay

duplikat layer “outer glass” menjadi “outer glass copy”, ubah namana menjadi “inner glass”, dan transform ukuranna, dengan W=95% dan H=94%

Kasi layer style gradient overlay, lu bisa klik dan drag arah gradasi na saat layer style aktif

Enter kalo udah beres !!!

lanjot ke pencet [CTRL+Click] pada Layer Inner Glass, untuk membentuk seleksi, tros transform rotate 180 derajat

geser seleksi na ke atas, ngepas di bagian mulut gelas

TAHAAANN !!! ) masih pada seleksi, sekarang sambil pencet [CTRL+SHIFT+ALT+Click] pada layer Inner Glass, jadi lu bakalan dapet seleksi terakhir ke gini

Bikin layer baru, dan kasiin warna #99b2bb, kasi nama layer “opening”

Lanjot ke pengambilan seleksi marquee tool, bikin seleksi menyeluruh di luar smua objek, lalu bikin layer baru namana “reflection”

ambil tool gradasi, gunakan gradasi Steel Bar yang udah ada dalam gradient preset default photoshop

Pencet [CTRL+M] bwat ngatur Curves na

Ubah Opacity layer refrelction menjadi 50%. tros transform warp objek na (Edit > Transform > Warp) atow, pencet [CTRL+T] tros kanan pada objek layer refrelction tros pilih Warp

ubah bentuk na jadi ke gini:

inget, gradasi pada layer reflection musti ngelebihin sluruh objek di belakangna.

pencet [CTRL+D] bwat ngilangin seleksi

lanjot ke [CTRL+Click] pada layer Outer Glass bwat bikin seleksi baru

Pilih menu Select > Invers atow [CTRL+SHIFT+I] tros pencet [DELETE]

Ubah blending layer menjadi Screen, dan opacity menjadi 70 %

masih pada layer reflection, kasi layer mask, dengan klik pada icon add layer mask

ambil gradient tool bwat ngasi gradasi mask dari atas ampe bawah, dengan settingan transparent ke gini

bwat path baru, bentuk na ke gini, ni nanti na bwat bikin aer jus na

klik kanan pada path na, pilih make selection

Pencet [CTRL+SHIFT+ALT+Click] pada layer Inner Glass

tinggal lu kasiin warna #ffb411 pada layer baru

kasi layer style

hasil na ke gini:

duplikat aer jus na menjadi jus copy, transform horizontal yak !

lu tinggal ubah Hue and Saturation na untuk layer jus pertama (dibawah layer jus copy)

merge dengan pencet [CTRL+E] bwat gabungin layer jus ama jus copy

bikin eliptical marquee tool pada layer baru, dan kasi gradasi (#fff200 ke # f7941d) dengan settingan ke gini

ubah nama layer na “Refraction”, transform jadi menipis ke gini:

dan kasi Filter > Blur > Gaussian Blur 3px

Oukeh, ampe sini cukup melelahkan bikin tutorial na )

sekarang kita bikin brush preset na bwat glmbung aer jus, namana bubble

bikin dokument baru.

bikin bidang make eliptical tool

kasi layer style gradient overlay

dan inner glow, dengan mode screen, opacity 100 %, dan size 30 px

lanjot ke klik kanan pada tulisan effect pada layer buble, pilih Create Layer

layerna bakalan jadi tiga biji, dan merge ketiga2 na

ubah settingan curves na

klik ok kalo udah

dan pilih menu Image > Adjustments > Invert atow [CTRL+I]

Jangan lepas seleksi na, pilih menu Edit > Define Brush, kasi nama brush na, klik OK

woke, simpen aja dokumen bubble lu, sapa tau diperlukan bwat bikin brush baru lagi.

Beralih ke dokumen semula, klik pada tab brush untuk mengatur setting brush na

woke, ambil tool brush lu, pake ukuran 8px

bikin layer baru namana bubble, tros klik dan drug di area aer jus, lu kreasiin sndiri, kire2 glembung aer ke jimane.

lom slese broder ! lu bisa group atow merge smua layer objek segelas minuman jus lu, tros duplikat vertikal bwat bikin bayangan na

atur posisi layer duplikat na di bawah gelas utama

kasiin gaussian blur

ubah opacity na, dan hapus make eraser tool, pada bagian yang klebihan

lanjot ke pembwatan bayangan bwat bawah gelas na

bikin layer baru, gunakan eliptical marquee tool

kasiin gaussian blur juga

ubah opacity na menjadi 33 %

ni hasil na

kreasiin dengan model nyang laen…

Share on Facebook

Tutorial ini merupakan tingkatan basic tutorial photoshop, bwat newbie mudah2an ini berguna…..

Pernah liat badges untuk harga2 barang di Web2 E-Commerce kan ? nah kadang lu nmu yang kaya bakalan kita bwat sekarang.

Cobain aja….

Bwat doku standar default photoshop, siapkan tool shapping

ambil shapping untuk poligon tool, dengan sides = 20

dan klik pada drop down menu panah di sebelah kirina, tentukan Indent Sides By = 20% dan centang pada option Star

Klik dan drag pada kanvas, tentukan sendiri ukuran badges na

wabis ntu lu kasiin layer style, pilih menu layer > layer style > gradient overlay

kasi settingan ke gini

jadi ke gini hasilna

sekarang pencet [CTRL+Click] pada layer shapping na, untuk membentuk seleksi

kalo seleksi na dah kbntuk, pilih menu Select > Modify > Contract, pada jendela nyang muncol kasiin nilai na 2px

tujuan na bwat ngecilin bidang seleksi menjadi 2px ke dalem

woke, diemin dlu seleksi na, ambil tool Eliptical Marquee Tool [M], sambil mencel [ALT+SHIFT] klik dan drag pada seleksi tadi, ni bwat ngambil seleksi yang diinginkan saja

jadi bakalan kebentuk seleksi ke gini

sekarang bwat layer baru, pilih menu Layer > New > Layer. Ambil tool gradient, gunakan gradient transparent berwarna putih. Lihat pada gambar

dan tarik gradasi na dari atas ke bawah, pada area seleksi

gradasi dengan cara diatas namana efek glossy, nah jangan lupa kassin teks bwat harga na

bwat memperbanyak objek, lu duplikat aja semua layer badges na, atow bisa lu gabungin ksmuana ke dalam layer group, klik pada ikon layer group, lalu klik semua layer dan drag ke dalam layer group, nah lu kan tinggal duplikat layer group na, untuk membwat badges lainna, selamat mencoba )

hasil akhir na ke gini

Share on Facebook

Ni layout na pas gw bikin rada ngaco dikit, smpet binun, tapi hasilna lumayan )

awalna mao bikin nyang full grey menu, tapi kmudian gw keingetan ama design salah seorang tmen gw di blog luar negeri, gw suka desgin vector na… akhirna nyang tadi mao bikin menu full grey, gw tambahin ada kesan nature na ) hihi gpp yak

akhirna gw kasi nama tutorial na: Nature Grey Shadow Blue Web 2.0 Header

perhatikan langkah langkah gw !!!!

buka doku 760 px di photoshop lu

ambil tool bwat bikin shapping (radisu 10px), bikin ke gini, kasi style gradasi

tros pakein dua shapping lagi dengan radius 6 px, tapi ini kurangin opacityna masing masing 35 % dan 15 %

wuki wuki, ambil tool shapping lagi, kali ini radius na masih sama (6px) bikin satu bidang dlu bwat menu na

objek diatas ntu bwat dasar menu na

nah ini bwat satu lagi objek diatas na, kasi gradasi ke gini

good job brother, jangan nyerah dlu ! )

kali ini kita bikin hiasan di bagian atas menu na… ambil pen tool, tros pilih substract mode

bikin titik2 segitiga

gedein bila perlu, gunakan guide untuk menentukan lokasi titik tengah objek menu

langsong kasi text menu Home

lanjot ke grouping layer2 menu tadi, wabis ntu lu bisa duplikat menjadi beberapa menu

ke nyan gw janjiin tadi, kite bakalan bikin kesan nature. kali ini dengan menambahkan logo green nature berupa dedaunan ama dikit rangke nye

ambil shapping elipse

dengan menggunakan pen tool selection, ubah beberapa titik untuk menentukan bentukna

bwat satu bidang lagi make pen tool untuk helai sebelahna, tapi nempatin na masih diatas objek daun pertama

konvert make convert point tool

lu atur atur aja make mouse centil lu ) biar keliatan lengkungan na tapih

kasiin gradasi yang sama, cuman lu balik arah gradasi na kali ini

untuk tulang daunna, gw pake pen tool tapi kali ini gunakan path

ambil tool brush, atur dulu pixelna menjadi 2px, tros pindah lagi ke tool path, klik kanan pada objek path, pilih stroke path.

sekarang kasiin bwat efek cahayana, ni gw kasi in make pen tool juga

konvert titik na make konvert point tool biar lengkung an na mengikuti helai daun warna ijo

tros kasi juga gradasi yg hampir sama

bikinin batang tangke na juga )

wabis ntu lu bisa group objek2 daun dan tange na, nah lu diplikat ajah

lu kreasiin posisi na, biar menyerupai taneman )

tros kasi juga beberapa efek brush, di bagian akarna, itu certianye tanah na )

hihi ni gw kasiin brush biru lagi, dengan blending option overlay

nah dah jadi kan, tinggal lu tambahin asesories lainna

kire kire kalo digedein ke gini hasilna

Share on Facebook

Lma ga jumpa dlam tutorial photoshop, I miss you brother

Sebage makanan pembuka, let’s see my new photoshop tutorial …

Baru baru ini ada pameran computer di Braga Bandung, dapet brosur, tros.. liat ada model interface GUI untuk beberapa merk Hardware.. salah satuna Gigabyte …

Teknologi dari Gigabyte “Dynamic Energy Saver” yang mampu menciptakan efisiensi power bwat PC lu..

Nyok kita bikin logona…

Ambil elipse tool, bikin bidang shapping ke gini:

Transform dikit, miringin ke kiri….

huki….. kasi base style na:

bikin satu elipse lagi lebih kecil dari sebelonna (sekitar 97%), bisa duplikat dari yang sblonna, tapi setelah duplikat klik kanan pada layer na, pilih Clear Style

Ambil pen tool, tentukan setting substract from shape area (-)

bikin titik2 na, pada posisi sesuai gambar:

dengan menggunakan add anchor point tool (liat tutorial2 sebelumna), kasi titik pada tanda merah, lalu lengkungin ke luar, biar menyesuaikan bidang lengkung elipse berwarna putihna

lakukan hal yang sama untuk sisi sebelah kanan

Hasil sementara, let’s see…..

woke… lanjot ke tahap berikutna

[CTRL+Click] pada layer shape putih, transform seleksi na 97 % (Select > Transform Selection), bwat layer baru

Ambil tool brush, untuk melatih gerakan brush lu, bubuhkan disekitar seleksi, dengan ukuran brush: soft round 35 px berwarna abu2 (#dedede)

lu bisa simpen seleksi na, Select > Save Selection sewaktu 2 bisa lu ulangi langkah ini, lu masih bisa make seleksi na

bikin satu elipse lagi di tengah untuk border na.. dengan sdikit style dowank

good job brother, bikin lagi elipse bwat base objek di tengah na

kali ini cukup dengan style gradasi downk

masih lom ckup brother…

bikin satu shape elipse lagi …

kasi style na

tros kasiin efek gradasi dengan gradasi transparent pada layer baru, untuk shadow di atas na

smpurnakan dengan smudge tool, untuk meratakan bagian gradasi

kasi shapping rounded di sebelah kanan

dengan sedikit style untuk rounded di tengahna

kasi text GIGABYTE

well, almost done brother…. !!

dan ini hasil akhirna, mahap kalo intensitas wara hasil capture na kurang.. gw lupa ngubah setting capture na ke PNG

Share on Facebook

Special Tutorial [ Sony Ericsson Series ]

ni bwat memperingati hari lahirna dremi.info 05 mei 2005, tepat bulan ini 05 mei 2008, ultah yang ke – 3 . gw mao bikin tutorial khusus bertema sony ericsson series.

karena kecintaan gw ma label sony ini, untuk session pertama tutorial sony ericsson series ini gw mao bikin logona dlu.

wuki… mudah2an bisa mirip ma yang asli na hihik…

bwat dokumen .. ukuran seperluna sajah.. gw pake shapping elipse tool

kasi style na:

bwat layer baru, ambil tool brush, untuk dasarna gunakan warna hijau muda, ukuran brush: 50-70 px, mode: normal

untuk yang kedua kalinya ubah ukuran brush menjadi 30 px, tapi kali ini kurangi opacityna menjadi 60%, dengan warna putih

gunakan dodge tool untuk nerangin bagian brush na

bwat satu elipse lagi di tengah na, dengan gradasi ke gini:

mode radial, tarik dari kiri atas ke kanan bawah:

kembali bikin layer baru, gunakan brush warna hijau muda, bwat nerangin bagian gradasi hijau di kiri atasna.

brush yang kedua menggunakan warna putih

untuk bikin lingkaran elipse di atasna gw kasi lagi shape sama besar, dengan style gradasi radial abu-putih

bikin satu elipse lagi diatasna, tapi kali ini gunakan mode shape substract (atow sambil nge-shape pencet ALT)

klik objek substract shape na make path selection tool, biar bisa ditransform rotate [baru CTRL+T], miringin dlu biar ke gini:

edit point na make convert point tool, atur biar ke gini:

bwat satu lagi elipse, tapi kali ini harus hati hati… dalam mengatur titik path na, gunakan convert point tool juga.

kasi gradasi abu putih bwat latar na

woke, gw cuma kasi efek bayangan refleksi aja, duplikat dan transform vertical

kasi gradasi transparent bwat bayangan smooth

apus dikit layer duplikat bayangan na pake eraser tool

gw kasi text na, jadi dah..

uhuii… mudah2an setelah ini tutorial gw ga di kopi sembarangan, kalo mau ngopi, author link dan statement di footer na jangan dihapus yaa

gw begadang trus smaleman bwat bikin tutor na, biar tmen2 pada bisa belajar, woke selamat mencoba..

Share on Facebook

sebuah kesederhanaan biasana berbuah keindahan, itu yang gw pelajari saat pertama kali terjun bebas ke dunia web ini. karena ada sebuah konsep sederhana yang selalu di pegang oleh para web designer. yakni konsep kesederhaan dalam mendesign layout akan menghasilkan design layout yang seimbang dan konsisten…

woke berangkat dari konsep sederhana di atas, ada tutorial bwat lu….

kali ini kita bikin tutorial untuk sebuah navigasi bergaya techy dan clean.

sedederhana aja broder, siapin doku secukupna. gunakan latar berwarna hitam.

ambil tool shapping dengan radius 10px. gambar shapping na ke gini.

kasi style ke gini…

bwat titik path dengan pen tool…. dan ciptakan seleksi …

convert titik na menjadi lengkungan halus.

woke… klik kanan pada path, pilih make selection, bikin layer baru, fill dengan warna putih, kasi nama layer shadow.

bwat ngilangin objek yang tidak diperlukan, [CTRL+Click] pada layer shapping dasar navigasi, lalu pilih Select > Invers [CTRL+SHIFT+I], pencet [DELETE] pada layer shadow.

gw kasi style gradasi ke gini :

untuk menu na gw kasi warna hijo muda #CCFF00, atur posisi na ke gini

nah skedar pemanis, gw kasi bar pemisah tiap menu na…

gw bikin na make teks biasa, gw ketik string ini “——”

transform ke Rotate 90^o CW

geser ke sebelah kiri menu…dan kotak di ujungna, sama teks angka 01 di dalam kotak na.

woke duplikat menjadi beberapa buah, untuk menu lainna…

jadi dah hahahaa….. simple kaaann …

Share on Facebook

bwat yang request gw minta mahap dlu deh, tutor na baru di bikin skrang.. ehehehkk …

tutor na gw usahaain bagus, uhuiiii.. ni lagi bikin buku dengan efek 3D.. mudah2an mudah dimengerti….

pertama bikin dlu shapping, dengan radius 2px untuk dasar cover bukuna …

bkin lagi untuk beberapa posisi di atas dan bawah kanan

tambahin untuk bar code di bagian kiri bawah, make shapping juga

untuk brand/kata kata utama pembaca, kasi buletan make shapping juga di bagian atas kanan

tambahin satu shape elipse lagi diatasna

kasi beberapa kata untuk mengisi objek elipse

singket aja, masukkan beberpa objek untuk cover bukuna…

merge seluruh layer menjadi satu { klik sambil tken SHIFT di layer2na, baru tken [CTRL+E] }

select objek bagian kiri, dan CUT lalu Paste

[CTRL+T] pada objek hasil paste, dan klik kanan pilih Perspective, arah perspetive na ke bawah.

lakukan hal yang sama untuk sisi cover buku, tapi kali ini arah perspetive na ke atas.

woke teken ENTER kalo dah sesui dan proporsional

seleksi pada objek shapping ijo di atas, dan delete bagian yang ditak perlu

kasi innner shadow pada layer cover depan na

untuk dimensi diatas na, kasi shapping baru berwarna putih…

satu shapping lagi berwana hitam

pilih kedua layer shapping (klik pada layer sambil tken SHIFT), lalu tken [CTRL+T] bwat transform, gunakan tramsform distort.

atur posisi na sehingga menutupi bidang dimensi diatas na…

kasi sdikit gradasi transparent pada layer shape warna putih

woke, selanjutna tersrah lu, disini gw kasi efek bayangan.

Share on Facebook

pertama buka dlu gambar sample monitor di photoshop, trus gambar motor/apa saja yang pengen lu masukin di dalam layar monitor

nah seleksi dlu keseluruhan objek gambar motor, pencet [CTRL+A], lalu kopi [CTRL+C]

pindah ke objek monitor, bwat seleksi sekitar layar monitor, lalu pilih menu Edit > Paste Into

agar objek monitor na menjadi masking untuk motor na….

klik pada layer motor, baru lu trasnform agar sesuai dengan ukuran layar.. pencet [CTRL+T] bwat transform

untuk bagian kepala pengemudina, biarin dlu ke gitu. nah duplikat layer motor, hilangkan masking na… klik kanan pada layer duplikat motor, pilih menu delete layer mask

seleksi pada bagian luar layar monitor dengan poligon lasso tool lalu pencet [DELETE]

untuk menghilangkan bagian yang tidak perlu lagi….,

biar saat menseleksi area batas layarna keliatan, sementara kurangi opacity pada layer motor di belakangna

nah jadi dah

Share on Facebook

tutorial photoshop kali ini gw mao bikin flash disk, … kira kira kaya gini sih bentuk na, namana juga ilustrasi.. hhehhek

pada canvas baru berukuran 800 x 400 px, aktifkan dlu grid canvas na untuk membantu membwat objek dengan posisi yang proporsional, via menu View > Show > Grid / pencet [ CTRL + ' ]

ambil eliptical marquee tool (M), bwat satu lingkaran elipse, trus lanjutin bikin satu elipse lagi, sambil mencet [SHIFT] bwat meng-add seleksi na.

.

add lagi (masih sambil mencet SHIFT) satu seleksi kotak diantara dua buah elipse di atas.

jadi ke gini hasil seleksi marquee na..

dari sono, bikin layer baru kasi warna bebas, bisa pake paint bucket, atow [ALT + BackSpace].

baru dah kasiin style na:

woke, kali ini kita kasi shadow sedikit kabur, pencet [CTRL+Click] pada layer dasar diatas ni bwat bikin seleksi yang sama persis, bwat layer baru, kasi warna putih, turunin opacity na

baru dah di Transform [CTRL+T], perkecil ampe ke gini. saat di transfrom, usahakan sebelumna pencet tombol [SHIFT + ALT] agar pergeseran transform na seimbang, yakni mengecil ke tengah:

diatasna, bikin layer baru lagi, kali ini bikin gradasi transparent putih, dari atas ke bawah.

woke, saat na kita pisahin antara body flash drive dengan tutupna, beralih ke layer dasar gradasi merah, ambil seleksi pada bagian sisi kiri …., pencet keyboard [CTRL+X] dan paste [CTRL+V] , pisahkan sementara ke samping kiri

ulangi untuk memisahkan layer shadow dan layer gradasi transparent.

gw pake shaping bwat nambahin bantalan ujung USB, kasi gradasi ke gini :

woke, bikin lagi satu shaping bwat lempengan USB na

gw kasi juga gradasi sedikit metal

kasi 2 kotak kecil di ujunga, ke yang sering lu liat di flash disk lu..

woke, untuk merek na lu bikin aja tulisan na di body flash drive na …

bwat gantungan na gw bikin pake pen tool…. dengan mode path

bikin titik path dlu

ambil convert point tool , lengkungin bagian titik2 na

woke, kalo udah lengkung dan ckup menarik, untuk sebuah gantungan flash drive lu… aktifkan tool brush, pilih size 3 px, dan ubah forground color menjadi hitam, kalo udah kembali ke pen tool.

bikin layer baru, baru dah klik kanan di path na, pilih stroke path.

gunakan option brush yang udah lu setting sebelumna

nah kasi dah sdikit drop shadow

jadi dah,…

Share on Facebook

bwat bikin 3d di photoshop itu sbnernye gampang banged, hmm… kata tmen2 sih rada susah, tapi ada banyak carana, ke tutorial ini niiii… nyok kita bikin logo bernuansa 3d

siapin canvas 400 x 400 px.

ambil salah satu shape di photoshop. gambar objek na.

COWO BANGET kan ??? gagagaagagakakkkkk

transform pake perspektiv …

teken enter.

transform lagi, tapi kali ini khusus tinggina sajah, menjadi 70 %

enter juga

duplikat sekali, geser make panah ke atas. ulangi ampe beberapa kali, jadi keliatan tebel 3d na

klik pada layer teratas, kasi style ke gini:

woke, beralih ke base shape paling dasar. kasi style juga

untuk kesan glossy, kasi gradasi transparent. [CTRL+Click] pada layer shape paling atas, pilih menu Select > Modify > Contract ( 2px )

kurangi opacity na….

delete sebagian gradasi make marquee tool….

ubah blending mode layer menjadi overlay

jadi dah… hahahahakkk

Share on Facebook

bicara sma dosen / pegawai sekret di jurusan gw, udah kaya bicara ma polisi…. apa itu mndidik ????

apa itu semua bisa bikin gw tambah pinter bikin web ??? atau berguna bwat mahasiswa untuk bisa lebih pintar dalam merancang aplikasi, kaya moto na yang tergolong kamoflase ????

halah sok idealis, gw rasa gw ga gitu2 amat …… kalo lagi kerja …..dan ini semua dah jadi budaya di sana.. aturan yang terlalu akademis bagi mereka menjadi boomerang bagi sebagian mahasiswa karyawan/atau yang mereka sering anggap sebagai mahasiswa "bermasalah" . Apa itu benaaar ?

Menrut gw, mereka aja yang ga tau dan tutup muka sama mahasiswa karyawan.

sebagai lambang kekesalam gw, gw bikin icon traffic, kaya yg diterapin di akademik na…

woke terserah lu bikin doku ukuran default saja.. ditemani mp3 hellowen – rabbit do not come easy ( Hell Was Made in Heaven ) malem ini ke na bete gw perlahan mulai ilang.. heheekk…

gw kasi background #eabe94

pertama bikin shapping dlu, ke gini, dengan warna #cc622e

pncet [CTRL+T], miringin 45 derajat

wabis ntu lu kecilin tinggina menjadi 50 %

duplikat sekali, dan ubah warna shapping na menjadi #8a3300, pindahin layerna ke bawah layer shape pertama

posisikan biar tampak sebagai shadow…

tambahin dua buah shape (sebelum ngasi shape baru pencet SHIFT ) untuk ujung kiri dan kanan bwat nyambungin potongan shape sebelumna

wuki, ni hasil smntara na:

bwat objek cone na, bikin lagi shape make pen tool, ke gini:

add anchor point, pada kedua ujung bawah dan atas shape cone na, tros atur posisi na ke gambar ini niii…

jangan lupa ampe lengkung yak

bikin shapping berbentuk elipse, taro di tengah atas objek cone, kasi warna abu2 (#E6E6E6)

lanjot sambil pcet SHIFT, tambahin objek kotak bwat disambungin ma elipse na

bwat satu lagi elipse di atas na, tapi kali ini sebelumna dibwat pencet ALT untuk me motong shapping…

duplikat layer na dan gedein bwat di taro di bagian bawah cone na

hehekkk… nah lu liat kan diatas, kotak abu2 na menceng keluar, untuk itu langsong aja kasi Quick mask [CTRL + ALT + G] pada shape 3 dan copyan na

smntara hidden dlu layer2 na, kecuali 2 buah pondasina

gw mau kasi gradasi dari orange tua ke muda… (#D25200, #F07E00), pencet [ CTRL + Click ] pada dasar yang berwarna orange coklat tua

potong seleksi na menjadi setengah bagian, kasiin gradasi

tros jangan lupa tken [CTRL + ALT + G] sekali lagi biar jadi masking untuk pondasina

nah untuk podasi yang satunya lagi gw kasi brush coklat sebagi ilustrasi bayangan dari belakang

kasiin blur dikit

jadiin masking juga

woke bijimane hheheeheee … : D

nah munculin lagi layer yang laenna, kasi brush dikit untuk pinggiran cone na pada layer baru

langkah selanjutna biar agak paten efek pinggiran bidang abu2 na, gw bikin pattern di doku baru

pilih menu edit > define patttern bwat nge save patterna

nah pindah lagi ke doku yang smula, pencet [CTRL+Click] di layer mask abu2 na, bwat ngaktifin seleksi.

ilangin pinggiran seleksi na:

nah baru dah lu kasiin pattern na, bikin layer baru, pilih menu Edit > Fill, pilih option pattern, dengan mode Multipay 100 %

ubah blending mode layer na menjadi overlay

pad alayer baru, kassin soft brush dikit di area abu2 na, jadi biar agak terang

skarang gw mao kasi gradasi transparent di sebelah kiri objek cone na

bwat seleksi pada cone, potong seleksi menjadi setengah bagian

potong juga seleksi bagian ujung atas elipse

kasi gradasi na

untuk di bawah na juga kassin donk broder…

potong bagian yang tidak perlu dengan seleksi, lalu DELETE.

kasi juga gradasi na untuk di ujung atas cone…

tros untuk memperjelas potongan masing2 gradasi transparent, gw kasi shape putih …

gw kasi bayangan untuk daerah cone na

ubah blending mode bayangan menjadi overlay, turunin opacityna

dkit lagi, untuk menyempurnakan cahaya, ciptakan seleksi untuk seluruh bidang, pilih menu select > modify > contract 1 px, dan kasi brush kuning muda di bagian belakang kanan pondasi na

kurangin opacityna, jadi dah

Share on Facebook

sambil nunggu ujian sore ini, gw bikin tutorial dlu aahhh….

ni ada tutorial photoshop bwat nge permak muka cewe cewe lu pade, kikikikk

biar kaga sring ke salon, lu kasiiin aja dikit facial di muka na, make apa lagi kalo bukan neng sotoshop sbage tukang salon na…. kakakakwww…

pertama pilih dlu foto sebagi objek. buka di sotoshop

kalo diperhatiin di channel blue, tampak masih jelek hehekk

seperti biasa langkah dasar dalam me retouch wajah adalah dengan menduplikat background tros kasi filter > gausian blur 10 px. nah biasana kalo me retouch cuma sampe sini, hasilna ga smpurna alias hasil blur akan menyebar ke area luar wajah, dan ga sreg banged kan ? untuk itu ikutin aja langkah di bawah ini heheek

woke, jangan lupa bwat ngerubah backgorund menjadi layer, dengan double klik pada background na, akan muncul konfirmasi perubahan dari background menjadi layer, klik OK

nah pindah pada layer background copy, double klik di layerna, untuk menampilkan setting blending advance option, hilangkan centang pada R dan G na

lanjot lagi, pilih menu Image > Adjustment > Curves

kasi settingan ke gini, atow bisa download setting na di packet tutorial ini load dan pilih sample curves na

hasil smntara ke gini:

kalo gw perhatiin ada sdikit noda di foto na, hilangkan make tool healing brush pastikan Sample All Layerna di centang

bikin layer baru, di bawah background layer, merge kedua layer (background dan background copy) dengan mncet [CTRL+E]

pilih poligon lasso tool bwat seleksi area wajah…..

masih pada seleksi sampil mencet [ATL] (ni bwat meng cut seleksi), untuk selain wajah ke mata, alis, bibir…

duplicat sekali lagi layer wajah, pilih select > Invers, tken [DELETE], karena kita dah duplicat tadi, jadi area selain seleksi pasti sama.

ulangi langkah yg sama bwat badan.

gunakan cliping mask [CTRL+ALT+G] untuk, menjadikan layer diatasnya sebagai quick mask.

terakhir kasiin filter > other > high pass dengan nilain 4 px

ubah blending mode healing copy menjadi screen dan opacity = 75 %

sntuh gambar dibwah bwat liat perbandingan na hehek

Share on Facebook

Update terbaru dremi.info kali ini nambahin component Feed Network, gw sneng banget ma service2 brilliant ini, karena berkat jasa networking na web kita semakin dapat melebarkan sayap untuk di nikmati tmen2 netter di penjuru dunia.

mohon mahap kalo ada yang ga suka dengan tutor2 gw, karna ga ada tuntutan bwat kalian suka ato ngga. ksemuana hanya bwat kepuasan batin gw dalam berekspresi dan berkarya. thanks bwat pengertianna.

wuki pernah liat link2 text subscribe now kan ? hampir di setiap web / blog lu bakal nemu link ini, hmm…. ada sedikit illustrasi yang bakalan kita bikin di tutor kali ini, biasana feed2 ini sudah disediakan oleh jasa feed network kaya feedburner.com nah bwat box konten feed na kita bikin sekarang hehehee…

bwat doku baru, langsong ambil tool gradasi dengan setting ke gini:

tarik gradasi bwat background awal na:

naaah kasiin dlo judul karya baru lu di sebelah kanan bawah:

ambil tool rectangle shape dengan radius 10 px, bwat bidang ke gini:

pencet [CTRL+Click] pada layer shapping na, bwat nampilin seleksi bidang.

aktifkan mode seleksi Intersect with selection:

ambil bagian top header dari box hejo na kekekekeeekewww…

nah kasi sedikit contract selection (Select > Modify > Contract : 2 px)

lanjot kasi gradasi ransparent putih.

ubah blending option layerna menjadi overlay:

woke, lanjot untuk mempertegas objek pada header, lu kasiiin gih shapping dikit (pake radius 10px)

pencet [CTRL+T], tros klik kanan pilih Perspective:

tarik 2 titik ujung bawah shapping ke dalam.

teken ENTER, jadi dah….

kasi sedikit drop shadow:

kurangi opacity layer shape na menjadi 19 %

woke….dah jadi header na, kasiin judul box na donk…

ukuran sebenarnye…

ni style bwat judul text na Recent Release

hmm…. tros bikinin juga box bwat konten feed na, namana Shape 3

kasi style na:

nah…sekarang duplicate shape na sekali menjadi shape 3 copy …. tros klik kanan di layerna pilih clear layer style, ulangi klik kanan na pilih restirize layer.

pencet [SHIFT] geser make panah ke atas 3 kali.

masih pada layer shape 3 copy…

lanjot pencet [CTRL+Click] pada shape 3 (bawah). pencet [DELETE], bwat ngapus bagian yg lebih dari shape 3 copy.

pindahin (layer order) shape 3 copy ke bawah layer shape 3.

knapa shape 3 copy na di pindahin ke bawah layer shape 3 ? hahahaa ntu biar efek overlay drop shadow dari shape 3 keliatan diatas na.

woke…lanjot, masih di layer shape 3 copy, pencet [CTRL+Click] pada shape 3 copy, aktifkan mode seleksi Intersect with selection:

select sebagian objek shape 3 copy….

bikin layer baru, kasi fill color kuning.

naaaaah efek overlay drop shadow shape 3 diatasna keliatan kan ?

masih pada seleksi dan layer shape 3 copy, pencet [DELETE]

wuki wuki …. hihiiii… untuk pemisah, gw delete 1 px di tengah objek kuning na.

nah di paling ujung kiri objek kuning juga gw delete 1 px.

jadi ke gini dah ….

tros kasi style di shape 3 copy na…

naaaah bwat konten feed na lu kasiin text yak…

kasi text untuk masing2 tab na…

gw bikinin tombol prev dan next, ama tombol pelengkap lainnna..

kasiin link subscribe na..

jadi dah… hehehehehehe…

Share on Facebook

lam kenal bwat om om tante tante penghuni ilmu web, mudah2an wabis nnni ga diikenal kikakakakakak…….

nyoba posting di ilmu web, moga moga suka.. hahahahaa…

Heuummm…. woke…!!! let’s start brother …

semalem wabis inetan ampe malem, bangun subuh, Musik The Misfits [Hate Breeders] kembali menggebrak kamar gw, langsong dah bikin tutor…

ni ada tutor sederhana, gw mao bikin design interface bwat menu button.. hmmm tema na styles dark …ga terlalu web 2.0, konsep na sedikit minimalis tapi masih tetep clean kok… hehehehhe..

bikin kanvas baro, Ubah warna background menjadi #1d1d1d.

pertama bikin layer group dolo, ama layer baru di dalam na

wuki, ambil rectangle marquee tool bikin bidang ke gini:

kasi style gradient overlay:

Â

Â

hmm… karena terkesan menimalis, gw kasi line gradasi di ujungna bwat keseimbangan objek button na, ….heheheehe.

Â

pencet [CTRL+Click] pada layer button lu (Layer 1), bwat nge-load seleksi na.

ambil kembali rectangle marquee tool na, ubah setting menjadi fixxed size: 1 px , ama tinggi lu sesuain ma button na.

aktifkan mode seleksi menjadi Intersect With Selection

klik sekali di ujung objek button: gedein biar keliatan, jadi biar seleksi ujungna ngepas.

nah bakalan kbntuk seleksi yang pas ma bidang button na

ubah warna forground color menjadi #5f5f5f, bikin layer baro

tarik gradasi na dalam seleksi

gw gedein pake zooming tool

wuki, duplicate aja broder layer na, tros pilih Edit > transform > Flip Vertical

weuhhehheeeee…lu geser dah taro di sebelah kiri na button.

ni hasil smntara naaa…

kasi text button na…perhatiakan tipografi na, yang atas gw pake text agak terang dari yg bawah

naaaah tinggal duplicate dah, layer group button lu…geser dengan posisi masing2 ujung menempel satu sama lain

hehek uhuiii jadi dah….

Â

Share on Facebook