miligraf :: Photoshop tutorials | Ruby on Rails

Photoshop’s Built-In Actions

By miligraf | Published: April 16, 2009

I found these tutorials…well, maybe not tutorials but articles that tells you about the default actions that Photoshop has.
I would put some examples but you can view all of them at BlueLobsterArt.com and I’ve only included the links for the Actions that I liked but at the bottom of each you can find the link for the rest of the default Actions.

Photoshop’s Built-In Actions: Text Effects from BlueLobsterArt.com

Photoshop’s Built-In Actions by BlueLobsterArt.com

Photoshop’s Built-In Actions: Image Effects from BlueLobsterArt.com

Photoshop’s Built-In Actions by BlueLobsterArt.com

Photoshop’s Built-In Actions: Frames from BlueLobsterArt.com

Photoshop’s Built-In Actions by BlueLobsterArt.com

Posted in Outsider's Turorials | Leave a comment

Simple & Professional Typographical Design

By miligraf | Published: April 15, 2009

Simple & Professional Typographical Design by PSDFAN

Simple & Professional Typographical Design from PSDFAN.com

As it is stated by PSDFAN, the tutorial is simple to do and it is well written so you won’t have any problem doing it.
I encountered two problems, if they can be named like that, first: on Step 2, when inserting the background text, the tutorial author says that he used a font size of 3pt but when I tried it, it was too small so I had to go with a font size of 12pt.
Second: in Step 6, when clicking “Layer > New Fill Layer > Gradient”, I get the Gradient Fill window first instead of the Gradient Editor window as it is shown in the tutorial, I guess they changed the order of the screenshots but when I had a different windows showing up, I got a little lost.

Here is my outcome:

Simple & Professional Typographical Design by PSDFAN

Download my .PSD

Posted in Outsider's Turorials | Leave a comment

Concept Web Logo in Photoshop

By miligraf | Published: April 14, 2009

Concept Web Logo in Photoshop by Netcades.com

Concept Web Logo in Photoshop from Netcades.com

Today I found this tutorial which I liked because of the outcome and how simple it was to follow it.
The process is quite simple, almost entirely worked with Blending Options.

I decided to go with the letter G -even if the tutorial is for a shapelogo- but I just had to do some minor changes with the numbers in the Blending Options. As I said, the tutorial is for a shapelogo but it works with a letter so it wont be very difficult for you to make it, here is my outcome:

Concept Web Logo in Photoshop by Netcades.com

Download my .PSD

Posted in Outsider's Turorials | Leave a comment

The making of: Marijuana Man

By miligraf | Published: August 20, 2008

With this tutorial you will learn how to create Marijuana Man in just 10 minutes.

Open up your Photoshop and copy this image:

Then create a new document and it will have the dimensions of the image you copied, paste the image. Now we will need an image of a marijuana plant (it’s a fake plant so don’t worry) so we can create our hero, use this one:

And paste it in a new layer. Duplicate the man layer and chop the man’s head in the duplicated layer and you should end with something like this, don’t worry about all the hair just make a simple work, not detailed.

Now duplicate the original man layer again (you should have the new duplicate under the chopped one) and move it a little to the right so the man looks like if it had invisible superpowers:

Now lets go to the marijuana image layer and with the Background Eraser Tool (right-click Eraser Tool), click once in the white background of the plant image (so that the Background Eraser has the white color setted -white will be you Backgound Color in the tool window-) and then right-click and use this settings:

Now click in the white background and you should end with this:

But there are some white areas between the leaves, so click on them so you get a fully transparent background but be careful because if you click on a leaf the Background Eraser will erase that color the next time you click. After you are done with that, select the Elliptical Marquee Tool (right-click Rectangular Marquee Tool) and make a selection like this one and press Delete on your keyboard:

Now press Control + J to duplicate the plant image with the transparent background and press Control + T to transform it like you want and erase some parts of the duplicated one, do this like 3 times until you end like something like this:

Next, merge the duplications with the plant layer and place them where the head used to be:

Make a round cut at the bottom of the new marijuana head to make it look like if it comes from inside the shirt.
Do the same with the hands and you will finally have your Marijuana Man!

Posted in Photoshop Tutorials | Leave a comment

Keyword Benchmarking with Google Adwords

By miligraf | Published: August 19, 2008

First, let’s define benchmarking: the process where you compare something of yours against something better and try to improve the standard of your something to improve the quality.

Before we start I just want to tell you that I did this with an ad campaign in Google Adwords and the effect was amazing, I got my unique visits duplicated from one day to another.

So, this post is to help you improve the quality of your keywords, comparing yourself against the best site in your same category, in order to increase your visitors quantity.

First, let’s Google a keyword (the first thing you want to get listed for in search results) and check the site thats first listed. Visit the site and copy the URL.

In my case I will use cowboy boots, I get the amazing number of 3,750,000 results and my first result is www.bootcity.com.

Go to https://adwords.google.com/select/KeywordToolExternal and select the Website Content and type the URL of the first result you had in your Google search.

You will get a list of keywords with their respective information, the most important information besides the keywords is the Search Volume column. This tells you how many times the keyword was searched in Google.

At the bottom of the page you can download the keyword list, do it for .csv (Excel). Open the list in Excel and order by the lowest to highest number in the Search Volume column (select the column, click the A-Z button and click Order when you get a warning message, don’t change anything).

We are done, copy and place the keywords on your website and give it some time to do it’s stuff.

Results may vary depending on your site category, also try getting keywords from other known sites.

Happy keyword hunting!

Posted in Web Development | Leave a comment

XHTML and CSS standards

By miligraf | Published: August 18, 2008

These web standards are established by the W3C (World Wide Web Consortium), so you should consider having a link to validate the XHTML and CSS of your website (for each page). The advantage of having the links -so people can click em- and of course to have both XHTML and CSS validated it’s like if they (the W3C) were “approving” your design and this will give you some extra points.

The links you should include are (paste them as they are):
XHTML: http://validator.w3.org/check?uri=referer
CSS: http://jigsaw.w3.org/css-validator/check/referer

Posted in Web Development | Leave a comment

WAMP – Work faster

By miligraf | Published: August 18, 2008

WAMP stands for Windows version (also available for Mac, Linux and Solaris families) of Apache, MySQL and PHP (or Perl or Python) all in one!

Having this installed will let you have your own server (offline) on your computer, so you wont need to keep uploading those files in order to see the changes that you’ve made on the website.

After being installed, you will just need to place your sites in C:\wamp\www and as soon as you hit Save on a file, you can see the changes…as fast as that.

You can get it from: http://www.wampserver.com/en/download.php

The lastest version is WAMP 2, this includes: Apache 2.2.8, PHP 5.2.6 + PECL, SQLitemanager, MySQL 5.0.51b and Phpmyadmin.

Posted in Web Development | Leave a comment

Black and white vector with highlights

By miligraf | Published: August 17, 2008

In this tutorial you will learn how to easily create a black and white vector with highlights from a photograph. Let’s start!

Open up the image from what you want to make a vector. I will use this one i took some weeks ago:

Black and white vector with highlights

Next, duplicate (Control + J) Background layer and save the PSD with a different name than the photo. Change the name of the new layer to: “vector”.

Now go to Filter > Artistic > Cutout, play with the settings being (the lowest setting):
Number of levels: 3.
Edge simplicity: 0.
Edge fidelity: 3.

You should get something like this, as for the details (remember you need the mayor highlights).

Black and white vector with highlights

Now, you must extract the object from the rest of the photograph. Do this with the Pen Tool and help yourself with lowering the opacity of the “vector layer” so you can see through it and have the Backgound layer as a guide.

When you finally have the selection, make a new layer with the extracted object and name it “object”, you should get something like this.

Black and white vector with highlights

I changed the object’s (airplane) color to white (with Blending Options > Color Overlay) so you could see it but change it to black. In the “vector” layer you can see the highlights of the object, now put “object” layer over “vector” if you dont have it like this and with the Pen Tool select the highlighted parts of the object that appear in the “vector” layer. Start selecting the highlighted parts of the object and fill one by one in a new layer, after this you should get something like this:

Black and white vector with highlights

Posted in Photoshop Tutorials | 1 Comment

Page title changer

By miligraf | Published: August 17, 2008

Have you ever wondered how sites (like this one) have a different page title for each page?

Here is how you do it:

Lets say you have 3 pages: index.php, about.php and contact.php. You need to have the page include system working so we can use the same variable for the page title changer.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website > < ? 	$page=$_GET['page']; //page title changer
						if ($page=="about"){ //if the page you are viewing is about.php it shows "About me" text in the page title
							echo "About me"; //shows "About me" text on page title
						}elseif($page=="contact"){ //same as above but with contact.php
							echo "Contact me"; //same as above but with "Contact me" text on page title
						}else{
							echo "Home"; //shows "Home" text on page title
						}
					?></title>
</head>
<body>
<a href="http://www.mywebsite.com">home</a> <!-- Menu link -->
<a href="?page=about">about me</a> <!-- Menu link for about page -->
<a href="?page=contact">contact me</a> <!-- Menu link for contact page-->
< ? 	$page=$_GET['page']; //include system. loads the file when you click the link
	if ($page=="about"){ //if you click the about link it will load about.php
		include('about.php'); //it loads about.php inside the index.php
	}elseif($page=="contact"){ //same as above but with contact
		include('contact'); //same as above but with contact.php
	}else{
		include('home.php'); //loads home.php if no link is clicked or if did not find any of the links/files above
	}
?>
</body>
</html>

Posted in PHP Tutorials | Leave a comment

Page include system for newbies

By miligraf | Published: August 17, 2008

This system pretends to have one file (index.php) and run the others (about.php, contact.php, ect.) inside of it

I read a lot of tutorials but later on, when my site had months running, i found about the PHP Switch Statement and this is the easiest way to have your PHP Navigation.

Copy and paste the code, you will find the explanaition in it.

< ?php
//First of all, let me tell you that you need to have a file with this code placed where you want the files to load and that if you include anyother file in the ones you are calling, you have to include them as if they were in the main folder.
//You can change $navigation to anything you want, like $page or $section but remember to change the 3 "navigation" words to your new one.
$navigation=$_GET['navigation'];
switch ($navigation) {

//You have to use it like this, when the file is in the same folder with the index. You can put any name in case and have the file in any folder at your site. http://www.yoursite.com/?navigation=section1
case "section1":
include('section1_file.php');
break;

//Another example, the file is in a subfolder but people wont know it, they will only see http://www.yoursite.com/?navigation=section2
case "section2":
include('section/section2_file.php');
break;

//As you can see in this last example, you can have your file in any place and put any name in your "case". http://www.yoursite.com/?navigation=lastsection
case "lastsection":
include('folder1/folder2/section3.php');
break;

//This will be your index or default page you want to show when people has just landed on your site and this will be the page it will show when people try to access any page that you havent declared here.
default:
include('home.php');

}
?>

Posted in PHP Tutorials | Leave a comment