tag:blogger.com,1999:blog-68832639722234664022024-03-13T20:06:22.945-07:00Photoshop TutorialsPhotoshop Tutorials for newcomers, intermediate and advanced Photoshop usersElahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.comBlogger101125tag:blogger.com,1999:blog-6883263972223466402.post-40687081413476206312014-01-29T10:06:00.002-08:002014-01-29T10:06:23.628-08:00CSS Login Form Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="Section0">
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;">Hello everyone. In today’s lesson, I will guide you step by step through the creation of this nicely-styled CSS/HTML Login Form :</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-qgVIVyHOD3k/UulCu39Mj-I/AAAAAAAACFE/15kqUVD00e8/s1600/Login+Form.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-qgVIVyHOD3k/UulCu39Mj-I/AAAAAAAACFE/15kqUVD00e8/s1600/Login+Form.png" height="272" width="320" /></a></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;">Create a new .html document. Name it login.html.</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;">Copy the code and insert it into your new created document:</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"><html></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><head></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><title>Login Form</title></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><link href="styles.css" rel="stylesheet" type="text/css"></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"></head></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><body></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><form action="login.php"></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><div class="paragraph"></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><p>Insert your credentials</p></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"></div></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><input type="text" name="username" size="15"/> </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><label for text>Username</label> <br/></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><input type="text" name="password" size="15"/></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><label for password>Password</label><br/></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><input type="submit" class="submit" value="Login" /></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"></form></span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"></body></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;"></html></span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 10.5pt;">This is how your page looks like now:</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-uYz4Q2EMjBM/UulCvNn4IoI/AAAAAAAACFI/lOLBfES2UhQ/s1600/how+to+create+a+nice+login+form.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-uYz4Q2EMjBM/UulCvNn4IoI/AAAAAAAACFI/lOLBfES2UhQ/s1600/how+to+create+a+nice+login+form.png" /></a></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14px;">Pretty comun,huh?</span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">Let’s add a bit of style. Create a new file in the same folder and name it styles.css</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">Align the form:</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">body</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">{</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">margin:50px 0px; </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">padding:0px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">text-align:center;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">}</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">Now stylize the form</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">form </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">{</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">width:250px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">height:200px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">margin:0px auto;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">text-align:left;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">padding:15px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">border-radius:25px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">border: 0px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">background: #C9C9C9;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> background: -webkit-linear-gradient(top, #eee 0%,#C9C9C9 100%);</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> background: -moz-linear-gradient(top, #eee 0%,#C9C9C9 100%);</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> background: -o-linear-gradient(top, #eee 0%,#C9C9C9 100%);</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> background: -ms-linear-gradient(top, #eee 0%,#C9C9C9 100%);</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> background: linear-gradient(top, #eee 0%,#C9C9C9 100%);</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">}</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">Stylize the rest of the form elements:</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">input</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">{</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">height:25px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">border:#005481;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">margin:10px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">margin-top:13px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">}</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">label</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">{</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">font-family: Helvetica, Arial, sans-serif;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> font-weight: bold;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> font-size: 14px; </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">color:#005481;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">}</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">.submit</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">{</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">background-color:#005481;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">font-family: Helvetica, Arial, sans-serif;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> font-weight: bold;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> font-size: 14px; </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">color:#FFF;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">width:120px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">height:30px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">border-radius:5px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">}</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">Add style to the first paragraph:</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">.paragraph</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">{</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">padding-left:10px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">padding-bottom:3px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">border-bottom:1px #005481 dotted;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">margin:0px;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">}</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">p</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">{</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">font-family: Helvetica, Arial, sans-serif;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> font-weight: bold;</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> font-size: 14px; </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">color:#005481;</span><span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;"> </span><span style="font-size: 10.5pt;">}</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-size: 10.5pt;">Great. Your form is done. If you have any questions, don’t hesitate to ask.</span><span style="font-size: 10.5pt;"><o:p></o:p></span></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<div class="p0" style="margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
</div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-66351695855675743672013-12-31T01:58:00.001-08:002013-12-31T02:06:35.167-08:00New Green CSS Menu with fade-in color effect<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Download this CSS/HTML nice menu for free.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="http://1.bp.blogspot.com/-qAMkA8fj6Hs/UsKUnuhoQ7I/AAAAAAAACEg/zU04aGIU8gQ/s1600/Green+CSS+Menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-qAMkA8fj6Hs/UsKUnuhoQ7I/AAAAAAAACEg/zU04aGIU8gQ/s1600/Green+CSS+Menu.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Download it for free! ICONS INCLUDED</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
LIKE US FOR MORE>> www.facebook.com/pages/Brushy/</div>
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jmp.sh/b/SCME0vBEyhjOU44a53Ma" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-7pbzqRUDWCE/UsKVCoZmOBI/AAAAAAAACEo/M42slnN4a8M/s1600/Download_Icon_Blue.jpg" /></a></div>
<br /></div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-51269111467756014472013-12-30T10:35:00.002-08:002013-12-30T11:08:23.897-08:00Fresh sleek CSS Menu With Roll-Down Search Bar and Cute Icons<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-TdIk2NbQEEQ/UsG8O-SeajI/AAAAAAAACDI/FCLxiOAH7Ug/s1600/Thumbnail+CSS+Menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-TdIk2NbQEEQ/UsG8O-SeajI/AAAAAAAACDI/FCLxiOAH7Ug/s320/Thumbnail+CSS+Menu.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Hi. As today's freebie you get an exclusively CSS/HTML Roll-Down menu with awesome icons and roll down search bar. Enjoy and if you like it please don't forget to share it and show your support :) xx<br />
<br />
<br />
Check it out live ;)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul class="menu">
<li><a href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Tutorials</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Freebies</a>
<ul>
<li><a class="textfonts" href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Textfonts</a></li>
<li><a class="brushes" href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Brushes</a></li>
<li><a class="shapes" href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Shapes</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Most Popular</a>
<ul>
<li><a class="heart" href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Favourites</a></li>
<li><a class="views" href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Most Viewed</a></li>
<li><a class="rating" href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Best Rated</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Submit</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=6883263972223466402#">Search</a>
<ul>
<li><div class="Search">
<input size="25" type="text" /></div>
</li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jmp.sh/b/RvlH0TW1MjelqeSngxPw" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-kBZKBos4Pqo/UsG8ax_NUGI/AAAAAAAACDQ/qfEUdmXE1wQ/s1600/Download_Icon_Blue.jpg" /></a></div>
<br />
<br />
<br />
<br /></div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-67329464445931623232013-12-30T06:32:00.003-08:002013-12-30T06:32:43.101-08:006 free glossy bubble chat icons<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://3.bp.blogspot.com/-Hikkj9P5c9g/UsGDkfh612I/AAAAAAAACC4/Fn6Ca-yKLfE/s1600/Glossy+Chat+Bubbles.jpg" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://3.bp.blogspot.com/-Hikkj9P5c9g/UsGDkfh612I/AAAAAAAACC4/Fn6Ca-yKLfE/s320/Glossy+Chat+Bubbles.jpg" /></a><br />
<br />
Icons in set : 6<br />
File type : .png<br />
Resolution : 128 x 128<br />
License : freeware<br />
Commercial use : allowed.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jmp.sh/b/pENhG0jcCCi1bQzbncRq" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-Jmjv156EOk0/UsF-5V_CRbI/AAAAAAAACCo/acMYJk5W7vE/s1600/Download_Icon_Blue.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-85582739988112721552013-12-30T06:12:00.000-08:002013-12-30T06:12:01.362-08:00Free Cooking Glove Detailed Icon<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-rJtwif1jElA/UsF-njY9aPI/AAAAAAAACCc/wyIukSjW7oQ/s1600/Cooking+Glove.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-rJtwif1jElA/UsF-njY9aPI/AAAAAAAACCc/wyIukSjW7oQ/s320/Cooking+Glove.jpg" /></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Icons in set : 1 <br />
File type : .png<br />
Resolution : 500 x 500<br />
License : freeware<br />
Commercial use : allowed. <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jmp.sh/b/38J9THKvCGOIMBEmSj3b" target="_blank"><img alt="http://jmp.sh/b/38J9THKvCGOIMBEmSj3b" border="0" src="http://3.bp.blogspot.com/-Jmjv156EOk0/UsF-5V_CRbI/AAAAAAAACCk/0knBjfN4TaY/s1600/Download_Icon_Blue.jpg" /></a></div>
<br /></div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-29137417847662830942013-12-29T06:53:00.001-08:002013-12-29T15:15:07.075-08:00"Cooking" Icon Set<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
Settings up a Cooking Games website? Then check these icons out.. They might come in handy so grab them fast! :)</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-jKt9x1nI7Hc/UsA2waKa_yI/AAAAAAAACB4/Zw77Rh762_w/s1600/Cooking+TTL.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-jKt9x1nI7Hc/UsA2waKa_yI/AAAAAAAACB4/Zw77Rh762_w/s320/Cooking+TTL.png" /></a></div>
Icons in set : 9 <br />
File type : .png<br />
Resolution : 128 x 128<br />
License : freeware<br />
Commercial use : allowed. <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Downloads -->
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3026182249045617" data-ad-slot="4960918434" style="display: inline-block; height: 200px; width: 200px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jmp.sh/b/xf3KMCirnk5w9FxiOD3Z" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-CmDBb3-CqQY/UsA3ISUDeOI/AAAAAAAACCA/pdeJQHfb8ZU/s1600/Download+Icon.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-44871807229454246532013-12-29T02:02:00.000-08:002013-12-29T02:43:41.134-08:00Beautiful glossy pen icon<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-yp33sN1NVpQ/Ur_yHGy17_I/AAAAAAAACBg/_KlKY6f_BsM/s1600/PEN-ICON.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-yp33sN1NVpQ/Ur_yHGy17_I/AAAAAAAACBg/_KlKY6f_BsM/s320/PEN-ICON.jpg" /></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Icons in set : 1 <br />
File type : .png<br />
Resolution : 500 x 500<br />
License : freeware<br />
Commercial use : allowed. <br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Downloads -->
</div>
<ins class="adsbygoogle" data-ad-client="ca-pub-3026182249045617" data-ad-slot="4960918434" style="display: inline-block; height: 200px; width: 200px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jmp.sh/b/MVurMvswx8JpwOjF2iLX" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-0NtotGa8Oco/Ur_ylD0PE9I/AAAAAAAACBo/PeQn3rvehvo/s1600/Download+Icon.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br /></div>
</div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-51469248253476364712013-12-27T03:33:00.001-08:002013-12-27T03:33:44.500-08:00Dark blue Icons with Shadow Available For Free Download<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-wgKNmKoeTuU/Ur1k6TMFXeI/AAAAAAAACAw/_0aLUQQfjdI/s1600/Sample.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-wgKNmKoeTuU/Ur1k6TMFXeI/AAAAAAAACAw/_0aLUQQfjdI/s320/Sample.jpg" /></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Icons in set : 27 <br />
File type : .png<br />
Resolution : 48 x 48 <br />
License : freeware<br />
Commercial use : allowed. <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Downloads -->
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-3026182249045617" data-ad-slot="4960918434" style="display: inline-block; height: 200px; width: 200px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jmp.sh/b/t0Eqc57XgtjuNpDE6k28" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-hr5YDXBAdzg/Ur1lEfYnvkI/AAAAAAAACA4/bVNxgV02R6g/s1600/Download+Icon.png" /></a></div>
<br /></div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-26641877114848264122013-12-26T10:53:00.000-08:002013-12-26T11:34:49.846-08:00Hand drawn Icons Available For Download<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-fmsG4zEuFEg/Urx5ieWhIdI/AAAAAAAAB_U/uPxHhE3xJM0/s1600/Hand+Drawn+Icons.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-fmsG4zEuFEg/Urx5ieWhIdI/AAAAAAAAB_U/uPxHhE3xJM0/s320/Hand+Drawn+Icons.jpg" /></a>
<div align="center">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Downloads -->
</div>
<ins class="adsbygoogle" data-ad-client="ca-pub-3026182249045617" data-ad-slot="4960918434" style="display: inline-block; height: 200px; width: 200px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="" style="clear: both; text-align: left;">
Icons in set : 27 </div>
<div class="" style="clear: both; text-align: left;">
File type : .png</div>
<div class="" style="clear: both; text-align: left;">
Resolution : 48 x 48 </div>
<div class="" style="clear: both; text-align: left;">
License : freeware</div>
<div class="" style="clear: both; text-align: left;">
Commercial use : allowed. </div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
hand drawn icons,tag icon,check icon,search icon,favourite icon,best rated icon,chat icon,chart icon, mobile icon,UI icon,chat 2 icon, medal icon, pin icon, free hand drawn tools icon, free hand drawn laptop icon, email icon, clouds icon,flag icon, links icon, phone icon, pinwall icon, info icon, free hand drawn anchor icon, arrow icon, bin icon, home icon, </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://speedy.sh/5HqK8/Hand-Drawn-Icons.rar" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-0TyygwatBIg/UryENcOWK7I/AAAAAAAAB_8/nhWGFmzMI6U/s1600/Download+Icon.png"/></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
</div>Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-67303163533826776862013-11-01T08:23:00.001-07:002013-11-01T08:23:34.217-07:00Create an awesome glowy blue loading bar using Photoshop.<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-PgtswWVsYRI/UnPHCISyOiI/AAAAAAAAB9c/lowxzZG8M6A/s1600/loading+bar+result.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-PgtswWVsYRI/UnPHCISyOiI/AAAAAAAAB9c/lowxzZG8M6A/s320/loading+bar+result.jpg" /></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Hey folks.<br />
In this tutorial you will learn how to create a nice and simple loading page.<br />
You can see the final result in the right side.<br />
So.. if you like it and you want to start click below.<br />
<div>
<br /></div>
<h3 style="text-align: left;">
<a href="http://retouch-and-manipulation.blogspot.de/2013/11/how-to-create-awesome-glowy-blue.html">Read Tutorial >></a></h3>
</div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-52769423896096796712013-11-01T08:20:00.000-07:002013-11-01T08:20:52.414-07:00How to create an awesome glowy blue loading bar.<div dir="ltr" style="text-align: left;" trbidi="on">
First things first. Open Photoshop and create a new 500px x 500px document.<br />
Grab the gradient Tool (keyboard shortcut for Windows is G).<br />
Right click in the upper left corner right on the gradient to open the color palette, and set the colors used in the printshot below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-lsegedl4fXs/UnPEjg2u4HI/AAAAAAAAB8o/C5NV8C7SL9Y/s1600/pic1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-lsegedl4fXs/UnPEjg2u4HI/AAAAAAAAB8o/C5NV8C7SL9Y/s320/pic1.jpg" width="320" /></a></div>
<br />
<br />
For the next step, in a new layer, with the Rounded Rectangle Shape, draw a white rounded rectangle right in the middle of your canvas.<br />
Radius: 20px.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-7jkI-uil_kw/UnPEiaNCH0I/AAAAAAAAB8Y/ezlMjWZMOrM/s1600/pic2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-7jkI-uil_kw/UnPEiaNCH0I/AAAAAAAAB8Y/ezlMjWZMOrM/s320/pic2.jpg" width="320" /></a></div>
<br />
<br />
Let's make a bit glowy. Open the Blending Options Panel by double-clicking on the layer's thumbnail.<br />
Add an Outer Glow filter using these settings:<br />
<br />
Blending Mode: Light;<br />
Opacity: 100%;<br />
Size: 8px;<br />
Color: #FFF FFF;<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-B6xxN2VgOXk/UnPEizIzj7I/AAAAAAAAB8g/Hhj5HAsTpLQ/s1600/pic3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-B6xxN2VgOXk/UnPEizIzj7I/AAAAAAAAB8g/Hhj5HAsTpLQ/s320/pic3.jpg" width="320" /></a></div>
<br />
<br />
For the next step, create another layer. With the same tool, Rounded Rectangle, draw another rectangle just a bit smaller, and place it right in the middle of the other rectangle.<br />
Open the Blending Options Panel again and apply a gradient using the following settings:<br />
<br />
Blending Mode: Normal;<br />
Opacity:100%;<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-GJYhdTnSWgI/UnPEmHB7zAI/AAAAAAAAB9Q/oF2MnToPRO8/s1600/pic4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-GJYhdTnSWgI/UnPEmHB7zAI/AAAAAAAAB9Q/oF2MnToPRO8/s320/pic4.jpg" width="320" /></a></div>
<br />
<br />
Right now your canvas should look like this :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-mCtRlPOwrV8/UnPEj-4tlvI/AAAAAAAAB8w/Q03whVoR1EY/s1600/pic5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-mCtRlPOwrV8/UnPEj-4tlvI/AAAAAAAAB8w/Q03whVoR1EY/s320/pic5.jpg" width="320" /></a></div>
<br />
<br />
Moving on.. duplicate the last created layer by right-clicking on the layer's thumbnail and choosing "Duplicate layer".<br />
Change the gradient style for the new created layer just as described below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-WVnzD97GRe8/UnPEkWB7jiI/AAAAAAAAB84/seiHmARScE0/s1600/pic6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-WVnzD97GRe8/UnPEkWB7jiI/AAAAAAAAB84/seiHmARScE0/s320/pic6.jpg" width="320" /></a></div>
<br />
<br />
Add an "Outer Glow" filter using Screen as Blending Mode, #529fd4 as color , and 29px size.<br />
Cut a small part of the rounded rectangle and you should have something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-oJkPiYGjvv8/UnPEk2K0ddI/AAAAAAAAB88/bi-KCWD_gpw/s1600/pic7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-oJkPiYGjvv8/UnPEk2K0ddI/AAAAAAAAB88/bi-KCWD_gpw/s320/pic7.jpg" width="320" /></a></div>
<br />
<br />
Name it "Loaded part bar" because we will need to refer to this layer later.<br />
Hehe..kinda looks like a pill isn't it?:)<br />
<br />
Let's move on.<br />
<br />
In a different layer, we need to create the stripes. There are several ways of doing them. Pick any color you want. Is not important right now.<br />
With the Rectangle Tool create 1 rectangle as shown. Make it higher than the rest of the loading bar:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-mjDpQJPJQgs/UnPElaPjOqI/AAAAAAAAB9U/QzoudPZcl3I/s1600/pic8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-mjDpQJPJQgs/UnPElaPjOqI/AAAAAAAAB9U/QzoudPZcl3I/s320/pic8.jpg" width="320" /></a></div>
<br />
<br />
Now, with your layer still selected, press CTRL+T on your keyboard to free transform your object. A menu will come up in the upper side of your Photoshop window. Set the angle to 45.<br />
Have a look below if you don't understand. Don't mind the text. My Photoshop is not in English.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-WTLv9KxVSlg/UnPElyJn2vI/AAAAAAAAB9M/QOcYHIxVT6c/s1600/pic9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-WTLv9KxVSlg/UnPElyJn2vI/AAAAAAAAB9M/QOcYHIxVT6c/s320/pic9.jpg" width="320" /></a></div>
<br />
<br />
This will rotate your object to 45 degrees.<br />
<br />
Now duplicate the layer ten times.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-lItuoLHE_W4/UnPEgQFpdZI/AAAAAAAAB74/sNjE3XOoS2w/s1600/pic10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-lItuoLHE_W4/UnPEgQFpdZI/AAAAAAAAB74/sNjE3XOoS2w/s320/pic10.jpg" width="320" /></a></div>
<br />
<br />
For the next step, select all these 10 layers. If you don't know how, here's a tip you can use even for Windows files. Select first layer, hold down Shift key, and select the last layer of these 10. Press CTRL+E to merge these layers or right-click choose Merge Layers.<br />
Now you have one single layer containing the stripes.<br />
<br />
We need to get rid of the extra parts of the stripes. We only need the ones within the borders of our loading bar. We do this by selecting the "Loaded part bar" layer and then inverting the selection. In order to bring up the "Loaded part bar" layer's selection, hold the CTRL key down, and press on the layer's thumbnail. You will notice when you're doing it right because also the cursor changes. I cannot show a printscreen because it doesnt work while CTRL is on. Once your layer's border is visible(selection), press CTRL + I to invert the selection. Go back and select the stripes' layer. It might be a bit confusing but just click on the stripes' layer without holding anything else. We need the "Loaded part bar" layer 's inverted selection to remain on.<br />
So just click on the stripes' layer and hit Delete on your keyboard. All the useless parts should go away:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Elu-0Z7HTQ0/UnPEhMz-F3I/AAAAAAAAB8A/m-6Z9_SfcqQ/s1600/pic11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-Elu-0Z7HTQ0/UnPEhMz-F3I/AAAAAAAAB8A/m-6Z9_SfcqQ/s320/pic11.jpg" width="320" /></a></div>
<br />
<br />
Open the Blending Mode Panel to apply a few styles.<br />
Gradient using the colors below:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-yJywSkq50RU/UnPEhRo3fRI/AAAAAAAAB8I/SapgTYnqjf0/s1600/pic12.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-yJywSkq50RU/UnPEhRo3fRI/AAAAAAAAB8I/SapgTYnqjf0/s320/pic12.jpg" width="320" /></a></div>
<br />
<br />
and also add an "Outer Glow" using the following settings:<br />
<br />
Screen - > Color: #0088b4 -> Size :5px;<br />
<br />
Create another layer. Make a small vertical line right where the stripes end, blur the layer a bit with the Blur Tool(R) and then add an Outer Glow with default settings.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-DPa2FTUyFzM/UnPEh1JYi5I/AAAAAAAAB8Q/Uk-53AIUEj0/s1600/pic13.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-DPa2FTUyFzM/UnPEh1JYi5I/AAAAAAAAB8Q/Uk-53AIUEj0/s320/pic13.jpg" width="320" /></a></div>
<br />
<br />
Add a message like "Loading...." , and you are done. Here is the final result:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-XvYaDkj05Uw/UnPEgWwLVXI/AAAAAAAAB7w/NV3tcvNDJY4/s1600/loading+bar+result.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-XvYaDkj05Uw/UnPEgWwLVXI/AAAAAAAAB7w/NV3tcvNDJY4/s320/loading+bar+result.jpg" width="320" /></a></div>
<br /></div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-25644790834580311532013-10-21T04:00:00.001-07:002013-10-21T04:00:46.471-07:00Candy Crush Logo<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-65UOQztS0ag/UmUGdznqetI/AAAAAAAAB6U/lpcNwHDtrfc/s1600/pic16.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-65UOQztS0ag/UmUGdznqetI/AAAAAAAAB6U/lpcNwHDtrfc/s320/pic16.jpg" width="320" /></a></div>
<br />
<br />
<br />
Hello everyone. Click to read more if you want to learn how to replicate the Candy Crush text effect.<br />
Enjoy :)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="http://retouch-and-manipulation.blogspot.de/2013/10/candy-crush-text-effect.html"><span style="font-size: large;">Continue reading >></span></a></div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-58407530869330990442013-10-21T03:56:00.000-07:002013-10-22T10:28:51.576-07:00Candy Crush Text Effect<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
This is a special one for the Candy Crush fans, but more than that, today you will learn how to replicate a text font when you are unsure abut which one to use<br />
So..open a up a new Photoshop document..<br />
Lay a gradient over, using the settings described below :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-58kKMmTz_qE/UmUGbhJoU5I/AAAAAAAAB5A/uFWvqTtd15A/s1600/pic1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-58kKMmTz_qE/UmUGbhJoU5I/AAAAAAAAB5A/uFWvqTtd15A/s320/pic1.jpg" width="320" /></a></div>
<br />
To make things easier, import a printshot with your favourite logo in Photoshop, and paste it over your new canvas:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-LoRMgm7CEwU/UmUGeF7rsdI/AAAAAAAAB6I/-VFv06tFBPQ/s1600/pic2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://1.bp.blogspot.com/-LoRMgm7CEwU/UmUGeF7rsdI/AAAAAAAAB6I/-VFv06tFBPQ/s320/pic2.jpg" width="320" /></a></div>
<br />
I've decided that a 200px Bold Arimo font will do the trick.. Feel free to use another font if you want too.. Write down "Cand" for now, using white as background.<br />
Right click on your text layer and select "Create work path".<br />
Grab the Pen Tool. Maybe there is another way, but I use convert-point to make all the dots on the work path visible. To select it right click on the Pen Tool icon and choose the last option.<br />
This option is marked in the next printshot with green arrow, and so are the work path dots.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-7RAT2difUwg/UmUGeqKwVrI/AAAAAAAAB6Q/3NlSRUi7GR8/s1600/pic3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-7RAT2difUwg/UmUGeqKwVrI/AAAAAAAAB6Q/3NlSRUi7GR8/s320/pic3.jpg" width="320" /></a></div>
<br />
Next thing to do is to place the path dots, over the original Candy Crush text, and this way you will obtain basically an identical letter. Take the corners and the middles and place them over the original Candy Crush text.. My Photoshop is in german but compare the icons. The best Tool to place the dots is the one pointed out by the green arrow below. Can be used to move the already existing path dots, or to add new dots. The next one with the minus is being used to remove dots.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-lyE-E0__Uvc/UmUGezw7gOI/AAAAAAAAB6Y/0ND6G6EExn0/s1600/pic4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-lyE-E0__Uvc/UmUGezw7gOI/AAAAAAAAB6Y/0ND6G6EExn0/s320/pic4.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Ok so now comes the funny part..<br />
As you can see, I've moved some of the dots over the Candy Crush text and I've removed the useless ones. This is how my "C" letter looks like after this 1st step :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-keUnZVCHFo4/UmUGfB5mFeI/AAAAAAAAB6w/Yu_bJlFuwdM/s1600/pic5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-keUnZVCHFo4/UmUGfB5mFeI/AAAAAAAAB6w/Yu_bJlFuwdM/s320/pic5.jpg" width="320" /></a></div>
<br />
<br />
Now using your "Pen Tool" skills, drag the points,add some more, or delete - as needed - and create the same shape as the original C has.. Just like in my printshot below..<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Pj-OxfXymRs/UmUGfbTGe4I/AAAAAAAAB6o/RaLhwRap04Q/s1600/pic6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-Pj-OxfXymRs/UmUGfbTGe4I/AAAAAAAAB6o/RaLhwRap04Q/s320/pic6.jpg" width="320" /></a></div>
<br />
<br />
Now do the same thing for a,n and d. Lower the opacity of the layer so you can see exactly what you are doing.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-5zVkqz_bY-4/UmUGflLG2pI/AAAAAAAAB6s/1Jba_XTWVFo/s1600/pic7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-5zVkqz_bY-4/UmUGflLG2pI/AAAAAAAAB6s/1Jba_XTWVFo/s320/pic7.jpg" width="320" /></a></div>
<br />
<br />
Create new layer. Right click and select "Make selection". Fill in the selection with any color.<br />
Apply the following settings to your new layer:<br />
<br />
⦁<span class="Apple-tab-span" style="white-space: pre;"> </span>Inner Glow - Normal / 55% transparency / color # f1ca52<br />
⦁<span class="Apple-tab-span" style="white-space: pre;"> </span>Gradient with these settings :<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-59QOIsieQHM/UmUGgClEVRI/AAAAAAAAB7A/0d_abqRdn1E/s1600/pic8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-59QOIsieQHM/UmUGgClEVRI/AAAAAAAAB7A/0d_abqRdn1E/s320/pic8.jpg" width="320" /></a></div>
<br />
<br />
⦁<span class="Apple-tab-span" style="white-space: pre;"> </span>6px outer Stroke using #713700.<br />
Great days..moving on..<br />
Continue until you finish up the entire text.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-TTEbNBwMOUo/UmUGgRy7VNI/AAAAAAAAB68/cwjoXHC2zns/s1600/pic9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-TTEbNBwMOUo/UmUGgRy7VNI/AAAAAAAAB68/cwjoXHC2zns/s320/pic9.jpg" width="320" /></a></div>
<br />
<br />
Apply same settings on "yCrush " too, except for the gradient, do use the following settings.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-AAGFvezPof4/UmUGboqnqwI/AAAAAAAAB5I/wAcNXDt4HJs/s1600/pic10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-AAGFvezPof4/UmUGboqnqwI/AAAAAAAAB5I/wAcNXDt4HJs/s320/pic10.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Fill the area inside the heart with #d92127, in a different layer. Burn up the borders (unsing "Burn Tool(O)")and light up a bit the center using the "Dodge Tool".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-QNpe8qg_iMQ/UmUGcMjtL4I/AAAAAAAAB5U/r_JrJCfVVlo/s1600/pic11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-QNpe8qg_iMQ/UmUGcMjtL4I/AAAAAAAAB5U/r_JrJCfVVlo/s320/pic11.jpg" width="320" /></a></div>
<br />
<br />
Create this shape in a different layer using #f7f3da as foreground color and the Pen Tool.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-sRn2Jqdivig/UmUGch9pwXI/AAAAAAAAB50/5frOcDkSvj4/s1600/pic12.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-sRn2Jqdivig/UmUGch9pwXI/AAAAAAAAB50/5frOcDkSvj4/s320/pic12.jpg" width="320" /></a></div>
<br />
<br />
Apply a Shadow Effect with default settings.<br />
Grab your text Tool.<br />
Arial-> Bold-> 72 px. Set the space between rows at 72px.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-8VkLPDJV1pM/UmUGc4bcsSI/AAAAAAAAB5s/Rel6KVK3L_8/s1600/pic13.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-8VkLPDJV1pM/UmUGc4bcsSI/AAAAAAAAB5s/Rel6KVK3L_8/s320/pic13.jpg" width="320" /></a></div>
<br />
<br />
Write<br />
S<br />
A<br />
G<br />
A<br />
just as shown below :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-G1qrnM6VUfM/UmUGdA08iSI/AAAAAAAAB5o/ZTpczLzvgp4/s1600/pic14.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-G1qrnM6VUfM/UmUGdA08iSI/AAAAAAAAB5o/ZTpczLzvgp4/s320/pic14.jpg" width="320" /></a></div>
<br />
<br />
Create a new layer.<br />
To create the next form, simply draw it again with the Pen Tool just like in the previous step.<br />
Afterwards set your foreground color to # d92127. Set the brush to Hard Round 5 px.<br />
Get back to your Pen Tool . Right click and select Stroke. Make sure "Pen Pressure" is unchecked and hit OK<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-YqjwzNa1uDc/UmUGdrudxqI/AAAAAAAAB58/l8Vw95TzME8/s1600/pic15.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-YqjwzNa1uDc/UmUGdrudxqI/AAAAAAAAB58/l8Vw95TzME8/s320/pic15.jpg" width="320" /></a></div>
<br />
<br />
Now in a different layer add this thread using a brownish color, and then burn it and dodge it several times.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-65UOQztS0ag/UmUGdznqetI/AAAAAAAAB6U/lpcNwHDtrfc/s1600/pic16.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-65UOQztS0ag/UmUGdznqetI/AAAAAAAAB6U/lpcNwHDtrfc/s320/pic16.jpg" width="320" /></a></div>
<br />
<br />
Add some strokes of light.<br />
<u>UPDATE</u> : One last step is to add the white border to the text. Load the selection of the text layers one by one.<br />
In a separated layer, after augmenting the selection (Select ? Modify ? Expand) with 20px, fill it with white and add a default Shadow filter.<br />
<br />
Check up on my final result.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/--tldg2drki8/Uma1QbkcZvI/AAAAAAAAB7M/RBCgmP9YZ7o/s1600/Candy+Crush+.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://1.bp.blogspot.com/--tldg2drki8/Uma1QbkcZvI/AAAAAAAAB7M/RBCgmP9YZ7o/s320/Candy+Crush+.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br /></div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-23140958432512634662013-04-14T14:47:00.001-07:002013-04-14T14:47:06.107-07:00Bella Cullen Vampire Photoshop Effect<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-e5r2fy1CHDE/UWshSDfP6RI/AAAAAAAAB1c/8ipEVeIi-TA/s1600/bella+vampire+effect+0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="271" src="http://3.bp.blogspot.com/-e5r2fy1CHDE/UWshSDfP6RI/AAAAAAAAB1c/8ipEVeIi-TA/s320/bella+vampire+effect+0.jpg" width="320" /></a></div>
<br />
<br />
Open your picture.<br />
Go to Image->Adjustments->Selective Color.<br />
Use the following settings:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-eA51bArueF8/UWshajQXS_I/AAAAAAAAB1k/NY5BBmllzgk/s1600/bella+vampire+effect+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-eA51bArueF8/UWshajQXS_I/AAAAAAAAB1k/NY5BBmllzgk/s320/bella+vampire+effect+1.jpg" width="320" /></a></div>
<br />
<br />
Select the eyes area. Goto Image->Adjustments->Hue/Saturation(CTRL+U),<br />
and use the following settings.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-ejqA8Q083G0/UWshg5xWX5I/AAAAAAAAB1s/jsXrR2f3iYA/s1600/bella+vampire+effect+2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-ejqA8Q083G0/UWshg5xWX5I/AAAAAAAAB1s/jsXrR2f3iYA/s320/bella+vampire+effect+2.jpg" width="320" /></a></div>
<br />
<br />
Burn the edges and dodge slightly the center of the iris.<br />
<br />
Using the Clone Stamp Tool (S), roughly remove the hair covering the forehead.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-uSvBeB_18P0/UWsho3FNVEI/AAAAAAAAB10/OsPde2CvgZI/s1600/bella+vampire+effect+3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-uSvBeB_18P0/UWsho3FNVEI/AAAAAAAAB10/OsPde2CvgZI/s320/bella+vampire+effect+3.jpg" width="320" /></a></div>
<br />
<br />
Let's add now that dark reddish haired color.<br />
Create a new layer.<br />
Select roughly the hair area(best method IMO is "Edit in Quick Mask Mode"(U)):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-xkS-CfMEArI/UWshuH_LF5I/AAAAAAAAB18/3NdYua_U94E/s1600/bella+vampire+effect+4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-xkS-CfMEArI/UWshuH_LF5I/AAAAAAAAB18/3NdYua_U94E/s320/bella+vampire+effect+4.jpg" width="320" /></a></div>
<br />
<br />
Once you have the selection, set your Foreground Color to #663d41 and fill in the selection.<br />
Set the Blending Mode to "Soft Light" and with a soft rounded brush eraser delete the parts you think don't fit.<br />
Your canvas should now look like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-ooWgW2JRcWg/UWsh4OscOSI/AAAAAAAAB2E/0CC0DnhaXAI/s1600/bella+vampire+effect+5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-ooWgW2JRcWg/UWsh4OscOSI/AAAAAAAAB2E/0CC0DnhaXAI/s320/bella+vampire+effect+5.jpg" width="320" /></a></div>
<br />
<br />
Do the same thing with the lips..Create a new layer, set the Foreground Color to #26111a, select the lips using any technique you're feeling comfortable with<br />
and fill in the selection with the Foreground Color.<br />
Now, instead of changing the Blending Mode, keep it to "Normal", but lower to Opacity to 57%.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-JsXMmKJ_bkE/UWsiEXjiSOI/AAAAAAAAB2M/0CGOb4t2B-A/s1600/bella+vampire+effect+6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-JsXMmKJ_bkE/UWsiEXjiSOI/AAAAAAAAB2M/0CGOb4t2B-A/s320/bella+vampire+effect+6.jpg" width="320" /></a></div>
<br />
<br />
Let's move on to that pale white skin you love..<br />
First, we will create the dark circles.<br />
Create a new layer. Name it properly. You should do that for all previous layers, to keep things clear and well organised.<br />
Set the Foreground Color to #5f5557.<br />
With a Soft Rounded small Brush draw something similar:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-q9lgRhk0lpw/UWsiL-_0E5I/AAAAAAAAB2U/aUPnGxr8r8s/s1600/bella+vampire+effect+7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-q9lgRhk0lpw/UWsiL-_0E5I/AAAAAAAAB2U/aUPnGxr8r8s/s320/bella+vampire+effect+7.jpg" width="320" /></a></div>
<br />
<br />
Set the Opacity to 57%.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-BrsMASAuzZ4/UWsiQox7pzI/AAAAAAAAB2c/DasOR-57nJ4/s1600/bella+vampire+effect+8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-BrsMASAuzZ4/UWsiQox7pzI/AAAAAAAAB2c/DasOR-57nJ4/s320/bella+vampire+effect+8.jpg" width="320" /></a></div>
<br />
<br />
Create another layer. Name it "Blush".<br />
Set the Foreground Color to #c79994.<br />
Draw something similar. I'll keep it red in the first printshot, to make it clear and visible!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-sltSH8LuqUY/UWsiZlHkLkI/AAAAAAAAB2k/ZF8p61Sr8Og/s1600/bella+vampire+effect+9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-sltSH8LuqUY/UWsiZlHkLkI/AAAAAAAAB2k/ZF8p61Sr8Og/s320/bella+vampire+effect+9.jpg" width="320" /></a></div>
<br />
<br />
Goto Filter->Noise->Add Noise.<br />
Use following settings:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-R7k7aE6Ia0Y/UWsifcajKcI/AAAAAAAAB2s/m2pI4jA7Xbk/s1600/bella+vampire+effect+10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-R7k7aE6Ia0Y/UWsifcajKcI/AAAAAAAAB2s/m2pI4jA7Xbk/s320/bella+vampire+effect+10.jpg" width="320" /></a></div>
<br />
<br />
Now add more blush. Repeat the steps described above, but instead of #c79994, use #c4a09b as Foreground Color.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-0ldxgvDNHH8/UWsimTe3bDI/AAAAAAAAB20/hkdjw9MDA_0/s1600/bella+vampire+effect+11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-0ldxgvDNHH8/UWsimTe3bDI/AAAAAAAAB20/hkdjw9MDA_0/s320/bella+vampire+effect+11.jpg" width="320" /></a></div>
<br />
<br />
Don't forget about adding the noise..<br />
<br />
For the next step..add even more contrast to the skin.<br />
Create a new layer. Name it "Blush 3", set the Foreground Color to #9e7b77, and add more color on the forehead and nose:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZUYRZWDVUKs/UWsitTFKyNI/AAAAAAAAB28/suRnmtP5JTc/s1600/bella+vampire+effect+12.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-ZUYRZWDVUKs/UWsitTFKyNI/AAAAAAAAB28/suRnmtP5JTc/s320/bella+vampire+effect+12.jpg" width="320" /></a></div>
<br />
<br />
Don't forget about adding the noise..<br />
<br />
Add some eye-shadow. In a new layer with #887475, draw something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Guzr8D3JRiM/UWsiz4SbuJI/AAAAAAAAB3E/UOGmqz-UMlY/s1600/bella+vampire+effect+13.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-Guzr8D3JRiM/UWsiz4SbuJI/AAAAAAAAB3E/UOGmqz-UMlY/s320/bella+vampire+effect+13.jpg" width="320" /></a></div>
<br />
<br />
Set the Blending Mode to "Overlay" and Opacity to 62%.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-PUFzFtAjzWI/UWsi5l0B6UI/AAAAAAAAB3M/I8uDhiXTqNU/s1600/bella+vampire+effect+14.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-PUFzFtAjzWI/UWsi5l0B6UI/AAAAAAAAB3M/I8uDhiXTqNU/s320/bella+vampire+effect+14.jpg" width="320" /></a></div>
<br />
<br />
I am not very happy with the eyebrows, so I've googled some and I've replaced the old ones.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-iMNOPQUawv4/UWsi_dYVD9I/AAAAAAAAB3U/9wVU5WGQzdU/s1600/bella+vampire+effect+15.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-iMNOPQUawv4/UWsi_dYVD9I/AAAAAAAAB3U/9wVU5WGQzdU/s320/bella+vampire+effect+15.jpg" width="320" /></a></div>
<br />
<br />
On a second thought, I'm thinking, dark circles the girl in the original picture has..are a bit to much.<br />
So I m adding another layer. Set Foreground Color to #b99693, and paint over the dark circles, in the right corner of her right eye.<br />
Blend it in using a bit lighter pink, while your painting towards the nose.<br />
See print shot:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-lb4bnR238ww/UWsjMELP1bI/AAAAAAAAB3c/2XjP7JbCENM/s1600/bella+vampire+effect+16.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-lb4bnR238ww/UWsjMELP1bI/AAAAAAAAB3c/2XjP7JbCENM/s320/bella+vampire+effect+16.jpg" width="320" /></a></div>
<br />
<br />
Create a new layer and with #FFFFFF paint a bit in the left corner of the eye and also on the water line.<br />
Set Blending Mode to Overlay and Opacity to 61%:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-KmzwN93gK9c/UWsjT8MvR6I/AAAAAAAAB3k/50bQLmAnD3k/s1600/bella+vampire+effect+17.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-KmzwN93gK9c/UWsjT8MvR6I/AAAAAAAAB3k/50bQLmAnD3k/s320/bella+vampire+effect+17.jpg" width="320" /></a></div>
<br />
<br />
Add a dark background and you're done. My final result :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-PnRSFHTXFLE/UWsjf74yepI/AAAAAAAAB3s/9wiUu_CpSKM/s1600/Edward+vampire+effect.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://4.bp.blogspot.com/-PnRSFHTXFLE/UWsjf74yepI/AAAAAAAAB3s/9wiUu_CpSKM/s640/Edward+vampire+effect.jpg" width="425" /></a></div>
<br />
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-83127221474325546212013-04-14T14:34:00.000-07:002013-04-14T14:48:18.593-07:00Bella Cullen Vampire Photoshop Effect<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://1.bp.blogspot.com/-Kc1Gqxccy2E/UWsf2KyZyMI/AAAAAAAAB1U/0tbvFSP8AXc/s1600/thumb_1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-Kc1Gqxccy2E/UWsf2KyZyMI/AAAAAAAAB1U/0tbvFSP8AXc/s320/thumb_1.jpg" /></a><br />
<div dir="ltr" style="text-align: left;" trbidi="on">
Hello fellows. Today you will learn how to turn an ordinary photo into a Stephanie Meyer's vampire portret.<br />
Resources:<br />
<blockquote class="tr_bq" style="text-align: left;">
Adobe Photoshop<br />
<a href="http://www.dreamstime.com/sailor-free-stock-images-rimagefree171419-resi2879056" target="_blank"><b>Download picture here</b></a></blockquote>
<br />
Ready? Let's get the party started. Click on "Continue Reading" link.<br />
<br />
<span style="font-size: large;"><a href="http://retouch-and-manipulation.blogspot.de/2013/04/bella-cullen-vampire-photoshop-effect.html">Continue reading >></a></span></div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-81874245348200676672013-04-07T10:04:00.001-07:002013-04-07T10:04:10.062-07:00High-end beauty, fashion and creative product retouching.<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-DyNpb74YeJY/UWGkrQ-vL1I/AAAAAAAAB1I/StQjaIPJEWo/s1600/0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://2.bp.blogspot.com/-DyNpb74YeJY/UWGkrQ-vL1I/AAAAAAAAB1I/StQjaIPJEWo/s320/0.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Open your picture in Photoshop.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Press CTRL+M to bring the Curves window on. Set the Input to
47 and Output to 0.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Using the “Edit in Quick Mask Mode” (Q) with a small soft
brush select the are of the water.<o:p></o:p></div>
<div class="MsoNormal">
Press “Q” again to load the selection.. Press CTRL + U to
bring the Hue Panel on or goto Image->Adjustments->Hue/Saturation , <b>check the Colorize box</b>, Set <b>Hue</b> to 180, <b>Saturation</b> to
52 si and <b>Lightness</b> to -38.<o:p></o:p></div>
<div class="MsoNormal">
<o:p> </o:p> </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Fbj3KnQi-l0/UWGj5OroXXI/AAAAAAAABz4/h_KWvneOt0k/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://3.bp.blogspot.com/-Fbj3KnQi-l0/UWGj5OroXXI/AAAAAAAABz4/h_KWvneOt0k/s320/1.jpg" width="320" /></a></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Go to Filters->Liquify. Using the Bloat Tool, get rid of
the extra belly, shoulders, and increase slightely the breast size.<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-hTwykBJFpxE/UWGj-uhCPiI/AAAAAAAAB0Y/6hXPW0lLiDY/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://2.bp.blogspot.com/-hTwykBJFpxE/UWGj-uhCPiI/AAAAAAAAB0Y/6hXPW0lLiDY/s320/2.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Next, select the “Patch Tool” (J) [see printshot] and get
rid of the belly, just like shown below.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>If you don’t know how to use it, here’s a short description.
Select an area you don’t like and drag the selection toward the nearest area
you want to copy..</b><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-tM6V1Thya-Y/UWGj8627zhI/AAAAAAAAB0A/vBtkPKKg5I8/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://3.bp.blogspot.com/-tM6V1Thya-Y/UWGj8627zhI/AAAAAAAAB0A/vBtkPKKg5I8/s320/3.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Using the “Edit in Quick Mask Mode” (Q), roughly select the
body area. You’ll gonna give now the chocolate bronze tanned effect.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ONJfEvtUIvk/UWGj-AoO3PI/AAAAAAAAB0U/ticDa1a59bw/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://3.bp.blogspot.com/-ONJfEvtUIvk/UWGj-AoO3PI/AAAAAAAAB0U/ticDa1a59bw/s320/4.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Press Q again to select the area, and go to
Image->Adjustements->Selective Color.<o:p></o:p></div>
<div class="MsoNormal">
Now you should have Colors set as Reds. Bring Yellows to
maximum. <o:p></o:p></div>
<div class="MsoNormal">
Select Yellows from the drop-down menu, and set Yellows to
50.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-6nKhbpDm0Oo/UWGj-Zm0nbI/AAAAAAAAB0Q/joYD_HjntFc/s1600/4_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://2.bp.blogspot.com/-6nKhbpDm0Oo/UWGj-Zm0nbI/AAAAAAAAB0Q/joYD_HjntFc/s320/4_1.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-jquKSIHpHis/UWGkD6OEcAI/AAAAAAAAB0w/u-TzHgDYqeU/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://4.bp.blogspot.com/-jquKSIHpHis/UWGkD6OEcAI/AAAAAAAAB0w/u-TzHgDYqeU/s320/5.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
Using “Patch Tool” (J) again, get rid of the water drops on
her legs.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-y5NikGQRqlc/UWGkB4ZoagI/AAAAAAAAB0g/UyA0CD8tblY/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://3.bp.blogspot.com/-y5NikGQRqlc/UWGkB4ZoagI/AAAAAAAAB0g/UyA0CD8tblY/s320/6.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Add a bit of volume to her hair.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Duplicate the layer.<o:p></o:p></div>
<div class="MsoNormal">
Usind the “Edit in Quick Mask Mode” (Q), select the hair.
Press Q again to select the area.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-XZFSKImK5C0/UWGkDSwSe-I/AAAAAAAAB0o/DXX08Xq1J9U/s1600/7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://4.bp.blogspot.com/-XZFSKImK5C0/UWGkDSwSe-I/AAAAAAAAB0o/DXX08Xq1J9U/s320/7.jpg" width="320" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Free Transform the selection CTRL+T.<o:p></o:p></div>
<div class="MsoNormal">
Using the Warp Mode, drag the points outside until you reach
a similar effect:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-JoCH8RT7D_U/UWGkGLYrNTI/AAAAAAAAB04/x8RpVJwiqi4/s1600/8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://3.bp.blogspot.com/-JoCH8RT7D_U/UWGkGLYrNTI/AAAAAAAAB04/x8RpVJwiqi4/s320/8.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Using a Soft Rounded Brush, erase the parts you think don’t
fit.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
For the next step, we’ll be adding a bit of a “glow”. Grab
the Dodge Tool(O), use Midtones to a approx. 50% Exposure, and light-up the
areas pointed out below by the red dots:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-NLX5Wb_Clhk/UWGkHfsqLoI/AAAAAAAAB1A/K7WCV3eyfF8/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://2.bp.blogspot.com/-NLX5Wb_Clhk/UWGkHfsqLoI/AAAAAAAAB1A/K7WCV3eyfF8/s320/9.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
For the drama effect, we will need a new layer. So go ahead
and create one.<o:p></o:p></div>
<div class="MsoNormal">
Set your Foreground Color to #001836, grab a Soft Rounded
Brush, and draw something similar to what is shown below:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-T3Acd6MwRqA/UWGj3tDvPqI/AAAAAAAABzo/i1aSwLboWIs/s1600/10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://1.bp.blogspot.com/-T3Acd6MwRqA/UWGj3tDvPqI/AAAAAAAABzo/i1aSwLboWIs/s320/10.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Set the Blending Mode to “Soft Light”.<o:p></o:p></div>
<div class="MsoNormal">
Duplicate the layer.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-AZ8UPO_YjCE/UWGj42nU9cI/AAAAAAAABz0/ZszXbol7Aiw/s1600/11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://3.bp.blogspot.com/-AZ8UPO_YjCE/UWGj42nU9cI/AAAAAAAABz0/ZszXbol7Aiw/s320/11.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
You’re done <span style="font-family: Wingdings; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-char-type: symbol; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-symbol-font-family: Wingdings;">J</span>!<o:p></o:p></div>
<div class="MsoNormal">
<span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">If you’ve enjoyed this tutorial don’t forget to subscribe, </span><a href="https://www.facebook.com/pages/Pinkzbiz/224868897548712?sk=app_201143516562748" style="background-color: #3d3d3d; color: #11a7df; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: none;">like us on Facebook</a><span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> , </span><a href="https://twitter.com/#!/pinkmast3ritza" style="background-color: #3d3d3d; color: #11a7df; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: none;">follows us on Twitter</a><span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">or distribute it using the sided button...it’s a simple thing to do and it will keep this blog running.</span><br style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Thanks for reading my blog.</span><br style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Ela. xx</span></div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-61234836881479400712013-04-07T09:48:00.002-07:002013-04-07T10:15:06.085-07:00High-end beauty, fashion and creative product retouching.<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://2.bp.blogspot.com/-t3yok6Yq43k/UWGjTe_iTII/AAAAAAAABzc/19yRjybPQDo/s1600/ttl_high-end+beauty_fashion+and+product+retouching..jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-t3yok6Yq43k/UWGjTe_iTII/AAAAAAAABzc/19yRjybPQDo/s320/ttl_high-end+beauty_fashion+and+product+retouching..jpg" /></a><br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal">
Hello folks. In today’s tutorial you will learn how to give a stunning effect to your pictures by making yourself tanner, skinnier, how
to give to your hair more volume and how to add contrast for a nice dramatic
effect. <o:p></o:p></div>
<div class="MsoNormal">
Resources<o:p></o:p></div>
<div class="MsoNormal">
Adobe Photoshop<o:p></o:p></div>
<div class="MsoNormal">
<a href="http://www.dreamstime.com/on-the-rocks-free-stock-photography-rimagefree199857-resi2879056" target="_blank">Beach girl photo</a><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: large;"><b><a href="http://retouch-and-manipulation.blogspot.de/2013/04/high-end-beauty-fashion-and-creative_7.html">Continue reading >></a></b></span></div>
</div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-29154405456197668812013-04-06T12:59:00.003-07:002013-04-06T15:31:07.837-07:00Fantastic Lightning Effect in just a few simple steps<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: justify;">
<span style="text-align: left;">Open up the picture you have just downloaded in Photoshop.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-hgzuXVjXTPo/UWB8Ax5CRNI/AAAAAAAAByM/NcAhF446HkQ/s1600/original_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://4.bp.blogspot.com/-hgzuXVjXTPo/UWB8Ax5CRNI/AAAAAAAAByM/NcAhF446HkQ/s320/original_1.jpg" width="320" /></a></div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Duplicate it. I always take this step..just in case
something goes wrong.<o:p></o:p></div>
<div class="MsoNormal">
Goto Image->Adjustments->Curves, or simply press
CTRL+M.<o:p></o:p></div>
<div class="MsoNormal">
A small window will pop-up, in which you need to insert the
values shown below.<o:p></o:p></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZFSPeDgPFVQ/UWB8FC4LwXI/AAAAAAAAByY/M1nKQmzTjPA/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://2.bp.blogspot.com/-ZFSPeDgPFVQ/UWB8FC4LwXI/AAAAAAAAByY/M1nKQmzTjPA/s320/1.jpg" width="320" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
By going through this step you should achieve something like
this :<o:p></o:p></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-fQSU3ufJNdI/UWB8IxXXKqI/AAAAAAAAByg/henM5pG7NOI/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://4.bp.blogspot.com/-fQSU3ufJNdI/UWB8IxXXKqI/AAAAAAAAByg/henM5pG7NOI/s320/2.jpg" width="320" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
Grab the Dodge Tool (Shortcut “O”). Change size of the brush
when going through this process. Light up all the areas pointed by the red
arrow.<o:p></o:p></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-7UL9s9k4p4I/UWB8jtQb_AI/AAAAAAAAByo/3LFVqPPPCYc/s1600/pic3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://3.bp.blogspot.com/-7UL9s9k4p4I/UWB8jtQb_AI/AAAAAAAAByo/3LFVqPPPCYc/s320/pic3.jpg" width="320" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
The last pipe I just couldn’t get it right using the Dodge
Tool. Therefore in a different layer I drew a thin white line and I blurred it
using the Gaussian Blur. See printshot :<o:p></o:p></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-JIBGt7_Z57A/UWB8n-UKslI/AAAAAAAAByw/1gShx-u0XDw/s1600/pic4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://4.bp.blogspot.com/-JIBGt7_Z57A/UWB8n-UKslI/AAAAAAAAByw/1gShx-u0XDw/s320/pic4.jpg" width="320" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
Set your color to #fca401. Grab the Soft Brush Tool, set the
size to approx. 400px, and – in a different layer – draw 2 spots of light right
on top of the lightbulbs. Like this :<o:p></o:p></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-r8Wnxb_1qAU/UWB8qoopKDI/AAAAAAAABy4/A5x841yFows/s1600/pic5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://4.bp.blogspot.com/-r8Wnxb_1qAU/UWB8qoopKDI/AAAAAAAABy4/A5x841yFows/s320/pic5.jpg" width="320" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
Set the Blending Mode to Color Dodge and duplicate the <b>layer</b>.<o:p></o:p></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Uljqfeiqjcg/UWB9Abv9-9I/AAAAAAAABzI/Q3eqVHhr6us/s1600/pic6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://3.bp.blogspot.com/-Uljqfeiqjcg/UWB9Abv9-9I/AAAAAAAABzI/Q3eqVHhr6us/s320/pic6.jpg" width="320" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
For a more dramatic effect, use Burn Tool to burn some
areas.<o:p></o:p></div>
<div class="MsoNormal">
My final result : <o:p></o:p></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-iGnMsLVr0AA/UWB9BDZqJlI/AAAAAAAABzQ/e_D7L-M4lMs/s1600/pic7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="http://3.bp.blogspot.com/-iGnMsLVr0AA/UWB9BDZqJlI/AAAAAAAABzQ/e_D7L-M4lMs/s320/pic7.jpg" width="320" /></a></div>
<div>
<br /></div>
<div>
<span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">If you’ve enjoyed this tutorial don’t forget to subscribe, </span><a href="https://www.facebook.com/pages/Pinkzbiz/224868897548712?sk=app_201143516562748" style="background-color: #3d3d3d; color: #11a7df; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: none;">like us on Facebook</a><span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> , </span><a href="https://twitter.com/#!/pinkmast3ritza" style="background-color: #3d3d3d; color: #11a7df; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: none;">follows us on Twitter</a><span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">or distribute it using the sided button...it’s just that this is a simple thing to do and it will keep this blog running.</span><br />
<span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Thanks for reading my blog.</span><br />
<span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Ela. xx</span><br />
<span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span><br />
<span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: #3d3d3d; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span></div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-21818345518181800402013-04-06T12:43:00.000-07:002013-04-06T15:33:03.103-07:00Fantastic Lightning Effect in just a few simple steps<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://2.bp.blogspot.com/-SKb2PvwBFWg/UWB6StEWETI/AAAAAAAAByE/VR87lQg161M/s1600/ttl_amazing_lighting_effect.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-SKb2PvwBFWg/UWB6StEWETI/AAAAAAAAByE/VR87lQg161M/s320/ttl_amazing_lighting_effect.jpg" /></a><br />
<div dir="ltr" style="text-align: left;" trbidi="on">
Hello. Going through this tutorial you will learn how to
turn a daylight into dimlight in 1 single step, how to turn on a light-bulb,
and of course how to make your pics look way better, in just a few simple
steps.<br />
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Resources:<o:p></o:p></div>
<div class="MsoNormal" style="margin-left: .5in; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]-->-<span style="font-size: 7pt;">
</span><!--[endif]-->Adobe Photoshop;<o:p></o:p></div>
<div class="MsoNormal" style="margin-left: .5in; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]-->-<span style="font-size: 7pt;"> <a href="http://www.dreamstime.com/seagull-proof-street-lamp-free-stock-photo-rimagefree223235-resi2879056" target="_blank">
</a></span><!--[endif]--><a href="http://www.dreamstime.com/seagull-proof-street-lamp-free-stock-photo-rimagefree223235-resi2879056" target="_blank">Seagul-proof Street Lamp picture </a> <o:p></o:p></div>
<div class="MsoNormal">
<a href="http://www.blogger.com/blogger.g?blogID=6883263972223466402"><br /></a></div>
<div class="MsoNormal">
<h4 style="text-align: left;">
<span style="font-size: large;"><a href="http://retouch-and-manipulation.blogspot.de/2013/04/fantastic-lightning-effect-in-just-few.html" target="_blank">Continue reading >></a></span></h4>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
</div>
</div>Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-36550521557209651922012-12-21T03:44:00.001-08:002012-12-21T04:07:03.716-08:00Animated Christmas Tree<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-J4CBEy3Aceo/UNRLlqo1G1I/AAAAAAAABws/SY1_nUddU3A/s1600/chrstanimated_ttl.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="50" src="http://2.bp.blogspot.com/-J4CBEy3Aceo/UNRLlqo1G1I/AAAAAAAABws/SY1_nUddU3A/s320/chrstanimated_ttl.jpg" width="50" /></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
Christmas' time..Christmas tree..animated >:)<br />
Create the document. 1000px X 1000px.<br />
Fill it in with a dark red gradient..or purple?:) Your choice.<br />
Just pick a nice color that will look good with a green tree on it.<br />
<br />
The point is how to animate things.<br />
So the tree is not going to be FANTASTIC.Just a rough sketch.<br />
Good. Create a new layer, pick up the Pen Tool (P) and draw a shape that looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-N04KxUlIkg0/UNRKxrfAFaI/AAAAAAAABvQ/AGhQMfDhTyQ/s1600/pic1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-N04KxUlIkg0/UNRKxrfAFaI/AAAAAAAABvQ/AGhQMfDhTyQ/s320/pic1.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Choose a nice green for you foreground color.<br />
Right click on your canvas and select Fill Path. Make sure you have "Foreground Color" selected and hit Ok.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-mJQaEw1M2NU/UNRKydi5Y_I/AAAAAAAABvU/PUo4_l2DXd4/s1600/pic2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-mJQaEw1M2NU/UNRKydi5Y_I/AAAAAAAABvU/PUo4_l2DXd4/s320/pic2.jpg" width="320" /></a></div>
<br />
<br />
Let's add the lights now, in a different layer.<br />
With a small soft rounded brush, draw a few spots as shown:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-tMbwLL8UFvw/UNRKzJWLL1I/AAAAAAAABvc/2NgMs30vcYE/s1600/pic3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-tMbwLL8UFvw/UNRKzJWLL1I/AAAAAAAABvc/2NgMs30vcYE/s320/pic3.jpg" width="320" /></a></div>
<br />
<br />
Now duplicate the layer.<br />
As you can see the lights look like they are stronger with both layers visible:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-6JBPkSGp01c/UNRKz5MECGI/AAAAAAAABvo/C-p8oJG7giM/s1600/pic4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-6JBPkSGp01c/UNRKz5MECGI/AAAAAAAABvo/C-p8oJG7giM/s320/pic4.jpg" width="320" /></a></div>
<br />
<br />
<br />
Now comes the funny part. Animating them.<br />
Go to Window->Animation.<br />
A different panel should pop up in the bottom of your screen.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-RNrlV13PMEc/UNRK1OCnTAI/AAAAAAAABvw/-dvjVMuM3W0/s1600/pic5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-RNrlV13PMEc/UNRK1OCnTAI/AAAAAAAABvw/-dvjVMuM3W0/s320/pic5.jpg" width="320" /></a></div>
<br />
<br />
In the right lower corner find the button shown in the screenshot and press "Convert to frame animation".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-onMACyNBCkI/UNRK2WeXSNI/AAAAAAAABwI/Vj8RoHGHi6E/s1600/pic6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-onMACyNBCkI/UNRK2WeXSNI/AAAAAAAABwI/Vj8RoHGHi6E/s320/pic6.jpg" width="320" /></a></div>
<br />
<br />
Press "Duplicate selected frames"<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-jLR8ihOnrz8/UNRK3wcsUXI/AAAAAAAABwM/GY0o_I7_sb8/s1600/pic7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-jLR8ihOnrz8/UNRK3wcsUXI/AAAAAAAABwM/GY0o_I7_sb8/s320/pic7.jpg" width="320" /></a></div>
<br />
<br />
A different instance of the layers will appear.<br />
At this step you need to hide the last layer created.<br />
Select 0.1sec as frame delay time, by pressing the small arrow indicated by my red arrow in the screenshot,<br />
and choose "Forever" instead of once where the blue arrow indicates.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-XT89Bcm2Jl8/UNRK444q2II/AAAAAAAABwU/gxnZBqs-EeE/s1600/pic8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-XT89Bcm2Jl8/UNRK444q2II/AAAAAAAABwU/gxnZBqs-EeE/s320/pic8.jpg" width="320" /></a></div>
<br />
<br />
Press play to test your animation:)<br />
Congratulations. You've just created your first Photoshop .gif file.<br />
In order to use it, you must save it properly.<br />
So goto File->Save for Web&Devices, hit Ok, name your file and hit again Ok.<br />
I'm using Gif Viewer 3 so I can see my .gif file properly.<br />
Done:)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-WAe5JFBr0Qo/UNRLaYRPFdI/AAAAAAAABwg/rs32FsGQhss/s1600/christmas-tree.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-WAe5JFBr0Qo/UNRLaYRPFdI/AAAAAAAABwg/rs32FsGQhss/s320/christmas-tree.gif" width="320" /></a></div>
<br />
<span style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">If you’ve enjoyed this tutorial don’t forget to subscribe, </span><a href="https://www.facebook.com/pages/Pinkzbiz/224868897548712?sk=app_201143516562748" style="background-color: #333333; color: #11a7df; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: initial;">like us on Facebook</a><span style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> , </span><a href="https://twitter.com/#!/pinkmast3ritza" style="background-color: #333333; color: #11a7df; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: initial;">follows us on Twitter</a><span style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">or distribute it using the sided button...it’s just that this is a simple thing to do and it will keep this blog running.</span><br />
<span style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Thanks for reading my blog.</span><br />
<span style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Ela. xx</span><br />
<br /></div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-696159262056653452012-12-21T03:36:00.001-08:002012-12-21T03:58:09.406-08:00Animated Christmas Tree<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-x9LOrO9RBcI/UNRJzlBqQgI/AAAAAAAABvE/Lz9yh5Zm_ew/s1600/christmas-tree.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-x9LOrO9RBcI/UNRJzlBqQgI/AAAAAAAABvE/Lz9yh5Zm_ew/s320/christmas-tree.gif" width="320" /></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Do you know you can use Photoshop to create .gif files?<br />
Those nice and cute small animated images?<br />
Well today you will learn how to create one of those.<br />
Let's get it started. Click the link below**<br />
<br />
<a href="http://retouch-and-manipulation.blogspot.de/2012/12/animated-christmas-tree_21.html">***READ THE TUTORIAL***</a><br />
<br />
<br /></div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-75379489309394443032012-12-20T15:16:00.001-08:002012-12-20T15:26:59.305-08:00How to install fonts in Windows<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-lYrIVAFRdd0/UNOevldI7uI/AAAAAAAABuY/ZhS2itNYhIo/s1600/fonts_icon.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="50" width="50" src="http://4.bp.blogspot.com/-lYrIVAFRdd0/UNOevldI7uI/AAAAAAAABuY/ZhS2itNYhIo/s320/fonts_icon.jpg" /></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
1. Google the font<br />
2. Download it.<br />
3. Normally it is in an archive so extract on your Desktop or somewhere where you can find it quickly.<br />
4. The extension is .ttf or .otf .<br />
5. Copy or cut the file.<br />
6. Browse this folder : C:\Windows\Fonts<br />
7. Paste the file. It should install in a second or so.<br />
8. Restart Photoshop.<br />
9. Now browse your fonts list until you find the newly installed ones.<br />
10. Share this post:D<br />
<br />
Thanks!</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-76928789123157569082012-12-20T15:08:00.000-08:002012-12-20T15:22:49.421-08:00Drawing a Christmas Card<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-IAP2-aWczs8/UNOdxFtSKMI/AAAAAAAABuI/VudDKbsw5Z4/s1600/ttl_chmcard.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="50" width="50" src="http://4.bp.blogspot.com/-IAP2-aWczs8/UNOdxFtSKMI/AAAAAAAABuI/VudDKbsw5Z4/s320/ttl_chmcard.jpg" /></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Hello guys. In this tutorial you will learn how to create your own nice and stylish <b>Christmas card</b>.<br />
First create a new 1000px X 500px document.<br />
As a background apply a nice dark red gradient.<br />
If you don't know which colors to use, just import the picture in <b>Photoshop</b> and use the Color Picker Tool (I) to get them.<br />
Now, in a new layer, using the Elipse <b>Tool</b>, draw in the right part of your canvas a circle.<br />
Hold down shift to make it a perfect circle.<br />
The color it does not matter as we will be applying some<b> Blending</b> Options.<br />
So go ahead and open the Blending Optins Panel - right click on the thumbnail and select Blending Options.<br />
Apply a 16 Opacity "Drop Shadow" filter. Leave the other settings for this as default.<br />
Next apply a Gradient Filter.<br />
Make sure to select "Radial" and use the settings below:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-UjJ-ovyF_FI/UNOYV09ZbhI/AAAAAAAABrc/qk7e9ZQe81E/s1600/pic0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-UjJ-ovyF_FI/UNOYV09ZbhI/AAAAAAAABrc/qk7e9ZQe81E/s320/pic0.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Create a new layer and make a selection as shown:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--8od1LCra-c/UNOYWg3bLoI/AAAAAAAABrg/Zsef0io8uTU/s1600/pic1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/--8od1LCra-c/UNOYWg3bLoI/AAAAAAAABrg/Zsef0io8uTU/s1600/pic1.jpg" /></a></div>
<br />
<br />
Select white as foreground color.<br />
Go to your <b>gradient tool</b> options and select "<b>Foreground</b> to Transparent":<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-hmrE3h83UL8/UNOYZr86qsI/AAAAAAAABsE/mUXZYmJLgNU/s1600/pic2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-hmrE3h83UL8/UNOYZr86qsI/AAAAAAAABsE/mUXZYmJLgNU/s1600/pic2.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br />
Now from top to bottom, holding down Shift, create your gradient.<br />
Set the Opacity to 39% for this layer:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-DFSYj57ike8/UNOYalKkAII/AAAAAAAABsI/jM7XfgSeh58/s1600/pic3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-DFSYj57ike8/UNOYalKkAII/AAAAAAAABsI/jM7XfgSeh58/s1600/pic3.jpg" /></a></div>
<br />
<br />
On the bottom of your orb, create the path shown below, using the Pen Tool:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-tsC1G8DZ6l8/UNOYbczxzjI/AAAAAAAABsU/VwJ7mxjKfD8/s1600/pic4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-tsC1G8DZ6l8/UNOYbczxzjI/AAAAAAAABsU/VwJ7mxjKfD8/s1600/pic4.jpg" /></a></div>
<br />
<br />
Create a new layer and fill your path with white.<br />
Go to Filter->Blur->Gaussian Blur, set the Radius to 5 and hit OK.<br />
Place the shape on the very edge of your orb and set the Opacity to 25%.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-xVxKUh7XtgM/UNOYcJ2eCmI/AAAAAAAABsc/znBn50fDJM4/s1600/pic5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-xVxKUh7XtgM/UNOYcJ2eCmI/AAAAAAAABsc/znBn50fDJM4/s1600/pic5.jpg" /></a></div>
<br />
<br />
For the next step, create a new layer and place it just above the background layer, below the others.<br />
Create a rectangle just as shown. Color doesn't matter.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-OoeQnpZ3QBI/UNOYdJTi8sI/AAAAAAAABsk/LZ5DWx9Y_WA/s1600/pic6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-OoeQnpZ3QBI/UNOYdJTi8sI/AAAAAAAABsk/LZ5DWx9Y_WA/s1600/pic6.jpg" /></a></div>
<br />
<br />
Apply the following settings:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-4e1LqMy7xg4/UNOYeG5IHoI/AAAAAAAABss/vu9nKcow6c4/s1600/pic7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-4e1LqMy7xg4/UNOYeG5IHoI/AAAAAAAABss/vu9nKcow6c4/s1600/pic7.jpg" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-1H1-siLvZDM/UNOZiKgY5-I/AAAAAAAABtA/PK3L86KZimE/s1600/pic8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-1H1-siLvZDM/UNOZiKgY5-I/AAAAAAAABtA/PK3L86KZimE/s1600/pic8.jpg" /></a></div>
<br />
<br />
For the colors used for the gradient, import the picture and use the Color Picker. It is a good exercise to use this tool.<br />
<br />
You should have something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-oJue97EXDmE/UNOZqBKBlNI/AAAAAAAABtU/-mP8HY88eYA/s1600/pic9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-oJue97EXDmE/UNOZqBKBlNI/AAAAAAAABtU/-mP8HY88eYA/s1600/pic9.jpg" /></a></div>
<br />
<br />
Create another layer, and place it below the last one.<br />
Using #ddaa1f draw this line, from somewhere behind the rectangle, up to the top of your canvas, to make it look like the orb is hanging.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-i1o2swKUnJE/UNOYXb8kFaI/AAAAAAAABro/NwuUm9sV5f4/s1600/pic10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-i1o2swKUnJE/UNOYXb8kFaI/AAAAAAAABro/NwuUm9sV5f4/s1600/pic10.jpg" /></a></div>
<br />
<br />
Merge down all the layers, except the background. In order to do that, select them and press CTRL+E.<br />
<br />
Duplicate the group twice, change the size and the position as shown:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-yNIYzQOWro8/UNOYYMc_NsI/AAAAAAAABrw/P8jBIydsuqo/s1600/pic11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-yNIYzQOWro8/UNOYYMc_NsI/AAAAAAAABrw/P8jBIydsuqo/s1600/pic11.jpg" /></a></div>
<br />
For the next step, I'm gonna tell you how to define your own brush in Photoshop.<br />
<br />
Open a new 20px X 20px document, with transparent background.<br />
Select Custom Shape Tools, and browse through the shapes until you find the Snowflake2 shape.<br />
Now holding down the Shift key, draw it as big as the canvas allows it. Make sure to stay within the borders of the canvas.<br />
Go to Edit->Define Brush Preset, name it snow or whatever you want, and hit Ok.<br />
You can close the document without saving it.<br />
Go back to our document.<br />
In a new layer, select the new brush - in should be placed lastly in your brush list - and use the brush allover your canvas, while increasing and<br />
decreasing the size ([ and ] are the shortcuts).<br />
Create different layers to set different opacities for your snowflakes.<br />
<br />
For the last step, find a nice hand-drawing font and draw the text as shown.<br />
I've used FlemishScriptBT , 132px size.<br />
I don't know if it is a default Windows Font or not, but if it's not, browse it through Internet and <a href="http://retouch-and-manipulation.blogspot.de/2012/12/how-to-install-fonts-in-windows.html">read this tutorial</a> to find out how to install it.<br />
<br />
This is my result:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-SfVcpGOLBfA/UNOYUdT7OgI/AAAAAAAABrU/o8w5Prih02U/s1600/last+result.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="http://3.bp.blogspot.com/-SfVcpGOLBfA/UNOYUdT7OgI/AAAAAAAABrU/o8w5Prih02U/s320/last+result.jpg" width="320" /></a></div>
<br />
<br />
<span style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">If you’ve enjoyed this tutorial don’t forget to subscribe, </span><a href="https://www.facebook.com/pages/Pinkzbiz/224868897548712?sk=app_201143516562748" style="background-color: #333333; color: #11a7df; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: initial;">like us on Facebook</a><span style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> , </span><a href="https://twitter.com/#!/pinkmast3ritza" style="background-color: #333333; color: #11a7df; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: initial;">follows us on Twitter</a><span style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">or distribute it using the sided button...it’s just that this is a simple thing to do and it will keep this blog running.</span><br />
<span style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Thanks for reading my blog.</span><br />
<span style="background-color: #333333; color: #cccccc; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Ela. xx</span></div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-63524281653519502672012-12-20T14:56:00.005-08:002012-12-21T01:48:27.201-08:00Drawing a Christmas Card<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-boCjkq1UF3c/UNOWvwwMNxI/AAAAAAAABq8/DEHZ1s3B3tE/s1600/ttl_christmascard.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="271" src="http://1.bp.blogspot.com/-boCjkq1UF3c/UNOWvwwMNxI/AAAAAAAABq8/DEHZ1s3B3tE/s320/ttl_christmascard.jpg" width="320" /></a></div>
<div dir="ltr" trbidi="on">
<br />
Learn how to draw your own <b>Christmas card</b>. You need to follow just a few simple steps. It doesn't require too much skill, neither resources.<br />
Please click the link below to read the <b>tutorial</b>.<br />
Enjoy!<br />
<br />
<br />
<br />
<b><a href="http://retouch-and-manipulation.blogspot.de/2012/12/drawing-christmas-card_20.html">***READ THE TUTORIAL ***</a></b></div>
</div>
Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com0tag:blogger.com,1999:blog-6883263972223466402.post-46267137002654388452012-09-12T05:48:00.001-07:002012-09-12T05:51:00.959-07:00Give life to your characters. How to draw Ariel the little mermaid.<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-orXaIV9-9vI/UFCFJ2lL3CI/AAAAAAAABqc/Nk2ZBk_bNy4/s1600/ttl_ariel.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="50" src="http://1.bp.blogspot.com/-orXaIV9-9vI/UFCFJ2lL3CI/AAAAAAAABqc/Nk2ZBk_bNy4/s320/ttl_ariel.jpg" width="50" /></a></div>Hey guys. In today's tutorial I will show how to draw and add color to a cartoon.<br />
<div dir="ltr" style="text-align: left;" trbidi="on">The subject is Ariel, the little mermaid.<br />
<br />
1st I would like to apologize for the quality of my 1st sketch, but I've recently bought a graphic tablet and I can't get quite used to it ..<br />
<br />
Going through this tutorial, you should achieve something like this:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-MgrJtoBqZMI/UFCBTWo1LlI/AAAAAAAABmo/Zf1evKy_M34/s1600/final_result.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-MgrJtoBqZMI/UFCBTWo1LlI/AAAAAAAABmo/Zf1evKy_M34/s320/final_result.jpg" width="320" /></a></div><br />
<br />
Create a new Photoshop document.<br />
Mein is quite small (600px X 600px)but, depending on how detailed you need your result, feel free to pick your own size for the document.<br />
<br />
Using the mighty Pen Tool, start drawing your sketch.<br />
If you own a tablet, choose a hard small brush, and make sure you check the Pen Pressure options in the brushes panel (F5).<br />
Of course using the Pen Tool will get you to a more accurate sketch, but it is also a lot moretime-consumming.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-H7WIRHoVo7o/UFCBVTdjMYI/AAAAAAAABm0/8iwf5TqFxsY/s1600/pic1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-H7WIRHoVo7o/UFCBVTdjMYI/AAAAAAAABm0/8iwf5TqFxsY/s320/pic1.jpg" width="320" /></a></div><br />
<br />
Follow my screenshots below during this process.<br />
Slit the images into even smaller parts and concentrate on each one of them.<br />
Don't forget to create a new layer for every part because later on we'll get back on them.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-HhzfljbmnBU/UFCBgyJt9bI/AAAAAAAABoI/O6eR4Qe0DVM/s1600/pic2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-HhzfljbmnBU/UFCBgyJt9bI/AAAAAAAABoI/O6eR4Qe0DVM/s320/pic2.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-de3RmiEw8fg/UFCBtCDMPNI/AAAAAAAABpU/7OYZWyvBpfI/s1600/pic3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-de3RmiEw8fg/UFCBtCDMPNI/AAAAAAAABpU/7OYZWyvBpfI/s320/pic3.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-DujFgajHk24/UFCBvcJyAaI/AAAAAAAABpo/eGl-prJrZmI/s1600/pic4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-DujFgajHk24/UFCBvcJyAaI/AAAAAAAABpo/eGl-prJrZmI/s320/pic4.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-EcRPwXjlQTw/UFCBwX0CfGI/AAAAAAAABpw/7Vq15Pl3wG8/s1600/pic5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-EcRPwXjlQTw/UFCBwX0CfGI/AAAAAAAABpw/7Vq15Pl3wG8/s320/pic5.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-WYwwdp_Xb_g/UFCBxQBEWhI/AAAAAAAABp4/uHdZOGH67zI/s1600/pic6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-WYwwdp_Xb_g/UFCBxQBEWhI/AAAAAAAABp4/uHdZOGH67zI/s320/pic6.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-twitf3ZnbVg/UFCBydPl_KI/AAAAAAAABqA/MQS1PxPTNjE/s1600/pic7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-twitf3ZnbVg/UFCBydPl_KI/AAAAAAAABqA/MQS1PxPTNjE/s320/pic7.jpg" width="320" /></a></div><br />
<br />
<br />
If you are not happy with your sketch, feel free to download mine and upload it in Photoshop.<br />
<br />
Let's start colouring our sketch.<br />
As we go, create a new layer also for colors and name them hair_color..etc.<br />
<br />
Pick a nice red and paint all over the hair area.<br />
Place the colors always under the sketch layer.<br />
<br />
<b><span style="color: #cc0000;">TIP: If you are not sure about the color, upload my picture in Photoshop and use the Color Picker Tool (I).</span></b><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-m19WQ0OLVcY/UFCBUr5VlNI/AAAAAAAABms/GGl4V0IJlJo/s1600/pic+10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-m19WQ0OLVcY/UFCBUr5VlNI/AAAAAAAABms/GGl4V0IJlJo/s320/pic+10.jpg" width="320" /></a></div><br />
Next paint the bra.. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-PKu6tcvAcU0/UFCBWhA1q0I/AAAAAAAABm8/QTPQpoZGxiA/s1600/pic11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-PKu6tcvAcU0/UFCBWhA1q0I/AAAAAAAABm8/QTPQpoZGxiA/s320/pic11.jpg" width="320" /></a></div><br />
<br />
the skin..<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-vtY5Olcvhk4/UFCBXq_I7gI/AAAAAAAABnI/VUxF-3JIM6k/s1600/pic12.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-vtY5Olcvhk4/UFCBXq_I7gI/AAAAAAAABnI/VUxF-3JIM6k/s320/pic12.jpg" width="320" /></a></div><br />
<br />
the tail<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-C76Xd-7W_IE/UFCBY_Jvp5I/AAAAAAAABnQ/-oMXe6E4NYg/s1600/pic13.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-C76Xd-7W_IE/UFCBY_Jvp5I/AAAAAAAABnQ/-oMXe6E4NYg/s320/pic13.jpg" width="320" /></a></div><br />
<br />
the eyes and the mouth<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-PK7sk7YncFM/UFCBaKqZMqI/AAAAAAAABnY/C7pheM9BTIk/s1600/pic14.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-PK7sk7YncFM/UFCBaKqZMqI/AAAAAAAABnY/C7pheM9BTIk/s320/pic14.jpg" width="320" /></a></div><br />
<br />
Now you get back to our sketch layers.<br />
<br />
For every part, set the color to a slight darker one than the colored layer.<br />
For example for hair, pick a darker red.<br />
Do this by opening the Blending Options Panel for each layer, and add "Color Overlay".<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-Xblgh9gmTf4/UFCBbcP0nWI/AAAAAAAABng/KYhaNcigRtM/s1600/pic15.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-Xblgh9gmTf4/UFCBbcP0nWI/AAAAAAAABng/KYhaNcigRtM/s320/pic15.jpg" width="320" /></a></div><br />
Above the hair_color layer, add a layer called.."Highlights".<br />
Using a lighter red,add some hightlights:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-ZsCmINdS46U/UFCBch-ZDNI/AAAAAAAABnk/tZ1kJiaevUE/s1600/pic16.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-ZsCmINdS46U/UFCBch-ZDNI/AAAAAAAABnk/tZ1kJiaevUE/s320/pic16.jpg" width="320" /></a></div><br />
<br />
Blur the layer using the settings in the screenshot:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-TBtxQlOOh5o/UFCBdyfpW-I/AAAAAAAABnw/bEA-wdCYr8U/s1600/pic17.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-TBtxQlOOh5o/UFCBdyfpW-I/AAAAAAAABnw/bEA-wdCYr8U/s320/pic17.jpg" width="320" /></a></div><br />
<br />
Blur also the hair contour (the sketch layer using the settings described):<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-hwxwzZ8Rzb8/UFCBfMpd-MI/AAAAAAAABn0/SUyGVSe7ToY/s1600/pic18.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-hwxwzZ8Rzb8/UFCBfMpd-MI/AAAAAAAABn0/SUyGVSe7ToY/s320/pic18.jpg" width="320" /></a></div><br />
<br />
In a new layer, add some white lines (a)).<br />
Smudge them as shown (b)).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-hxZHc3GyWEg/UFCBgPEUxYI/AAAAAAAABoA/1gzwkidDE5w/s1600/pic19.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-hxZHc3GyWEg/UFCBgPEUxYI/AAAAAAAABoA/1gzwkidDE5w/s320/pic19.jpg" width="320" /></a></div><br />
<br />
Set the opacity to 35% and the layer mode to "Color Dodge".<br />
<br />
Apply a gradient to the entire surface of the hair using the settings below:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-51KSVVssft8/UFCBimP5AVI/AAAAAAAABoQ/ehVi3Too680/s1600/pic21.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-51KSVVssft8/UFCBimP5AVI/AAAAAAAABoQ/ehVi3Too680/s320/pic21.jpg" width="320" /></a></div><br />
<br />
Now pick again the "Smudge Tool" and smudge the darker parts of the hair created in the first step(the hair sketch):<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-8glaNhk5bzk/UFCBj6jFSfI/AAAAAAAABoU/dUWeA5Wqspk/s1600/pic22.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-8glaNhk5bzk/UFCBj6jFSfI/AAAAAAAABoU/dUWeA5Wqspk/s320/pic22.jpg" width="320" /></a></div><br />
<br />
Using Burn&Dodge, with the hair_color layer selected, burn and dodge some areas to give more volume to the hair.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-d_Pmdr7GQfc/UFCBk9tKhGI/AAAAAAAABoc/_oaWlWZ9cyE/s1600/pic23.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-d_Pmdr7GQfc/UFCBk9tKhGI/AAAAAAAABoc/_oaWlWZ9cyE/s320/pic23.jpg" width="320" /></a></div><br />
<br />
Let's proceed to the skin.<br />
<br />
All we need here is the Burn/Dodge Tool.<br />
Follow the guidelines in the scrrenshots.<br />
Where the shadow is deeper, we need Burn Midtones and also Burn Highlights.<br />
You change these setting in the upper menu, the drop-down list next to "Range".<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-efVjfCbcIeA/UFCBl8v6M0I/AAAAAAAABok/E7OBm83hFHQ/s1600/pic24.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-efVjfCbcIeA/UFCBl8v6M0I/AAAAAAAABok/E7OBm83hFHQ/s320/pic24.jpg" width="320" /></a></div><br />
<br />
Next select the skin_sketch layer and smudge it as shown:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-_D11eWGy8Pw/UFCBna3vtpI/AAAAAAAABow/MCqM6z4fg1c/s1600/pic25.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-_D11eWGy8Pw/UFCBna3vtpI/AAAAAAAABow/MCqM6z4fg1c/s320/pic25.jpg" width="320" /></a></div><br />
<br />
Give a 3D look to your Bra (the mermaid's actually :)), using again the Burn & Dodge Tools..<br />
Where you see darker areas use Burn, and where you see lighter areas, use Dodge..simple as that:D<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-32CesGOnWik/UFCBpru_QpI/AAAAAAAABpA/xgmwILyflQI/s1600/pic27.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-32CesGOnWik/UFCBpru_QpI/AAAAAAAABpA/xgmwILyflQI/s320/pic27.jpg" width="320" /></a></div><br />
<br />
Now we smudge the tail to make it look like it is "built-in".<br />
So smudge it upwards, to combine it with the skin.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-nSFEayUWWFw/UFCBrEdAJrI/AAAAAAAABpE/qaPwdgFg9fw/s1600/pic28.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-nSFEayUWWFw/UFCBrEdAJrI/AAAAAAAABpE/qaPwdgFg9fw/s320/pic28.jpg" width="320" /></a></div><br />
<br />
For this step, we need some scales.<br />
Search on Google for some scales, or a big fish.<br />
<br />
Place the image over the tail, CTRL + Click on the "Tail" layer's thumbnail.<br />
This will make a selection of your layer.<br />
Make sure your fish covers the entire upper area of the tail.<br />
Hit CTRL+SHIFT+I (Inverse Selection) and hit delete. Make sure you have the image with the fish selected and not the one with the tail.<br />
Delete unuseful parts, leaving only the upper part covered in scales.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-TAG3bmxifOA/UFCBsNPdH7I/AAAAAAAABpM/bSjyUozHDSY/s1600/pic29.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-TAG3bmxifOA/UFCBsNPdH7I/AAAAAAAABpM/bSjyUozHDSY/s320/pic29.jpg" width="320" /></a></div><br />
<br />
Apply a vector mask, so the Opacity is increased in the upper part.<br />
If you don't know how to apply a vector mask, the technique is described in this tutorial.<br />
<br />
Dodge the upper middle area.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-mpQLtAAV5lM/UFCBuEjjiFI/AAAAAAAABpg/C1Be49QtrbQ/s1600/pic30.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-mpQLtAAV5lM/UFCBuEjjiFI/AAAAAAAABpg/C1Be49QtrbQ/s320/pic30.jpg" width="320" /></a></div><br />
<br />
As you can see in this screenshot, the lower part of the tail it is also modified.<br />
Same as with the bra, smudge the sketch lines, and afterwards, add burn and dodge to create a 3D feel.<br />
<br />
For the last step, just browse for a nice underwater image, place it under the other layers, and blur it.<br />
<br />
That's it.<br />
Again here is the final result.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-MgrJtoBqZMI/UFCBTWo1LlI/AAAAAAAABmo/Zf1evKy_M34/s1600/final_result.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-MgrJtoBqZMI/UFCBTWo1LlI/AAAAAAAABmo/Zf1evKy_M34/s320/final_result.jpg" width="320" /></a></div><br />
If you’ve enjoyed this tutorial don’t forget to subscribe, <a href="https://www.facebook.com/pages/Pinkzbiz/224868897548712?sk=app_201143516562748">like us on Facebook</a> , <a href="https://twitter.com/#!/pinkmast3ritza">follows us on Twitter</a> or distribute it using the sided button...it’s just that this is a simple thing to do and it will keep this blog running.<br />
Thanks for reading my blog.<br />
Ela. xx</div></div>Elahttp://www.blogger.com/profile/04350816021490609918noreply@blogger.com1