Fair Priced Sleek Interface new Web host to try out

Are you looking for a great WebHost? Well give HostNexus a try! First impressions show an impressive looking website design:

Looks like they know what they are doing when it comes to design and interface!

Looking through the site I noticed that the pricing is more than fair. Linux Shared hosting starts at $3.95/month and that will be what your average user needs. Now that’s Cheap Web Hosting

If you are looking to get into Ruby on Rails Development, they may be a good option as well. Embracing the latest technologies Host Nexus seems to be an excellent choice.

Web Developers out there, if you are looking for a good quality Web host, give Host Nexus a try! Awesome Company.

Wolfman Signature Tutorial

Create an awesome Signature for Forums in Photoshop The Wolfman Signature

This Is A Tutorial To Learn How To Make A Basic To Complex Signature With Many Techniques Within. You WIll Use c4d’s to Clipping Masks. Also You WIll Use Brushing and Smudging Styles. There Is Many Things To Learn From This Tutorial. I Hope You Like. Enjoy

Note: This tutorial is for moderate-advanced users a basic knowledge of Photoshop Layers and editing is required

Step 1 Find a Render, I recommend a website such as http://planetrenders.net, or you can use the render below either way, Place Your Render First On A Blank(transparent) Area. My Signautre Is 320 x 110 But Its Up To You. Copy Your Render About 12 Times To Start Just Incase You Want.
Then Press The Eyes On The Left Of The Layer
Until You Get To Get Only One Render That Has An Eye
Now Your Started And Follow The Steps
I Have Provided.

Step 2 To Get Results Like This I Opened One Of The Renders I copied. Then I Got The Smudge Tool And Smudged The Render Up And To The Left For Flow. To Find The Smudge Tool, Look For The Bucket Or Gradient Tool And Its The Tool Below It. Right Click The Icon below The Bucket Or Gradient And Its The Little Hand Icon Thing. Thats The Smudge Tool.

Step 3 Again I Opened A New Render. I Put The Layer Style On Color Dodge. THen I smudged Again To The Same Direction But Not As Heavily.

Step 4 Same Thing. Opened A New Render And Put The Layer Style As Screen. I Smudged Again To The Same Direction.

Step 5 I Again Opened A New Render Or Made Visible. I did Nothing With This. Just Let It be.

Step 6 On This Layer I Added/Placed Three Abstract 3d Renders. You Can Add Abstract or Fractual 3D Renders. It Depends On Your Signature. I Places Them Where My Signature Is Going To Flow. I Put My C4D’s(The 3D Renders) On Layer Style Screen And One Of Color Dodge. You Can Change Your Styles To What Ever Looks Best On Your Signature. Also The Amount All Depends On You And Your Signature.

Step 7 I Put A Big Blue Brush On The Right Side With It Going Against My Flow But Adding Depth. It Doesnt Matter The Color Really But It Is SomeTimes Good To Make It The Color Of Your Signature. Pick A Main Color.

Step 8 Okay This Is A Tricky Part If Your New. To Get To This Step You Need To Create A New Layer.(Shift-Ctrl-N). Press Okay. Then You Are Going To Do Image – Apply Image. Then You Need To Right Click That New Layer And Select Create Clipping Mask. Then You Need To Move That Layer Around And You Will See What Happens. Helps Make It The Same Colors As The Signature.

These Are The Photo Filters And Gradient Maps That Help You Blend Your Signature And ArtWorks Together. You Dont Have To Use These Settings But I Did For My Signature Because They Looked Good For Me. Experiment With The Settings To Get Your Look.

Step 9 After Doing All These Things You Should Get Your Signature Something Like This. On This Step I AlSo DiD A Copy. Create A New Layer Again. Do Image-apply Image. Then Go To Filter-Sharpen-sharpen. It Should NoW Look More Precise. Take Your Eraser Tool And Erase Lightly Around The Render A Bit so It Blends In A Bit More. On Your 3D Renders erase A Bit That Looks Too Sharpened And Bold. But You Want it Bold Enough So It Shows. A Bit.

Step 10 For This Part. I Am Adding A Light Source. I DiD This By Creating A New Layer. Then I Took A 100 – 200 px. White brush And Put It On The Top Left Of The Render. You Want To Put It Where Your Render Has A Natural Light/Shade To It. Then Where It Is Lighttist You Place It There. I Made Serval Layers To This Because I Wanted A Good Light Source. I Changed The Opacity And Fill Of These Layers To Get a Good Light Source. You Dont Want It Too Bright Or Too Dull.

Step 11 For This I Made A New Layer. Then I Took A Splatter Brush And Brushes Over The Signautre. I Choose Spots Where The Render Might Be Too Noticeable Or Where There Seems A Lack Of Detail. Dont Worry About The Color I Did It So You Can See. When You Are Brushing Erase What Covers The Render And What You Dont Like. We Will Be Doing A Clipping Mask Again.

Step 12 To Create The Clipping Mask. Create A New Layer. Do Image-Apply Image. Then Right Click The Layer. Select Create Clipping Mask. Then Move The Signature Around Until You Get What You Want. You Can Resize The Signature To Get It How You Like It. You Can always Erase.

Step 13 For This Part, Make A New Layer. Do Again Image-Apply Image. Then Filter-Sharpen-Sharpen. I Erased Most Of It Except For A Few Places here I Liked. You Dont Have To Do This Step If You Dont Like. But I Would Erase Most Of The Layer Except For A Few Places. If You Dont erase It Will Look Messy.

Step 14 All I DiD Here Was Make A Border. To Do This I made A New Layer. Then Image-Apply Image. Then I Moved The Layer Around So That The Bottom Is At The Top. The I Duplicated The Layer 4 Times.Right Click Layer Or Ctrl-J. Then Move Around Till You Get A Border On Each Side and You Like It.

Step 15 And finally I Added Some Text. For The Text Try To Pick Colors That Fit With The Signature. Mostly You Can Pick Colors In The Signature. Make Sure It Blends But Itsnt Too Noticeable Or Cant See It At All. For Text Placement Pick A Spot Where It is Sorta Close To The Render And That Looks Good. Add It To The Side With Less C4D’s usually. That Side Usually Needs Somethign To Cover The Negative Space. text Is Perfect. Then After Text I Added A someThing Called Sclan Lines.. You Dont Need These But I like Using Them.. They Are Little Tiny Lines In The signature That Add Effects. Then I Added A Brightness/Constract Layer. You Can find This Where You Found The Gradient Maps And Photo Filters. Dont Make It Too Dark Or Light. But Make It Usually Darker But barely …..

Awesome Ice Cold Effect in Photoshop

Also See: letterpress effect

Create a cool looking ‘Ice’ Effect in Photoshop using this easy to follow quick tutorial.

Click Here to see the Tutorial

Sweet User Interface in Photoshop

We are going to be creating a User Interface like below:

To begin create a new image 500×100 pixels for the Dimensions, fill the background with #3F3F3F

Click on the brush tool, and make the settings like so:

Create a new layer and pull out the pen tool and make a path like below

Right click in the graphics area and choose ‘stroke path’ choose Brush with Simulate Pressure unchecked It should look like below

Where your layers are click on the ‘paths’ tab, click on the Path1 and drag it to the new path icon to convert it to an editable path, right click on the path and choose ‘duplicate path’ duplicate it twice like below:

Now deselect all the paths by clicking in the grey area below them, and click the layers tab, select the layer with the black line and it and press ctrl+j to duplicate it, press ctrl+i to change it’s color to white and then use the move tool and the arrow keys to move the line down about 2-3 pixels, change that layers blending mode to Overlay.

Now go back to the paths tab, pull out the pen tool and select one of your duplicated paths. Make sure your pen tool is configured like so:

Use the pen tool to make a shape like below:

Right click in the graphic and choose ‘make selection’ deselect the path and go to the layers tab, pull out the gradient tool and set the colors to black to transparent

Now create a gradient like so.

Do the exact same thing for the top except pull the gradient too the top.

Now use the text tool to type out the text ‘sweet’, I used the font Tahoma and the color is #CF7600

Create a new layer above the ‘sweet’ layer and press ctrl+g (alt+ctrl+g in CS4) to mask that layer over the text layer below it, ctrl+click on the sweet text to select it, pull out the marquee tool and press alt on the keyboard and select the bottom half of the selection to deselect it.

Fill the remaining selection with white, and set that layer opacity to about 20-30%

Follow the same process for the UI text. You can then add in some links like Home | Portfolio etc.. I used Tahoma 10 pt.

Contemporary Photoshop Logo

Other Logo Tutorials: Skype Logo, Logos

Description

In this tutorial we will be creating a Logo with some cool effects and a
professional final look.

Objectives

• Layer Opacities and Styles
• Text Effects
• Blending Options
• Text Reflection

Final Result:

Step 1:

Create a new document 439×153 pixels, fill the background with Black #000000 and
write your text, in my example “Company Name”
(i used the font “Helvetica” for the text).

Step 2:

Let´s put some colour to the text. Fill the word “Company” with #FF9600 and “Name”
with #6B6B6B.

Step 3:

Now we are going to create the reflection. This is done by duplicating the text
layer and going to Edit>Transform>Flip Vertical

Step 4:

Now rasterize the layer (Layer>Rasterize>Text), take the Rectangular
Marque Tool
and select the half part of the layer like this:

Step 5:

Now press Alt+Ctrl+D and write 25 in the box, then press the Delete buttom two
times, Ctrl+D to deselect the layer and change the opacity to 60% (you can play
with this number if you like), you will have the reflection like this:

Step 6:

Select the Text Tool and write the slogan, in my example “your slogan goes here”,
i used the Trebuchet MS font and with a space between each leater to make it
looks better, like this:

Step 7:

Now let´s create a new layer (Ctrl+N) on the top of the text layer (not the
reflection one, the Company Name layer), and let´s select the Elpitical Marquee
Tool. Press D and X to use the White colour and draw an eliptical selection on
the text like this:

Step 8:

Then fill that selection with White (Alt+Backspace), you will have something
like this:

Step 9:

Then press Ctrl+G on the white selection layer to get this:

Step 10:

Then change the opacity to 20% (you can play with this number too), you will get
this:

Step 11:

Finally you can add some symbol to your Logo, i added an orange parrot on the
last “e” of the word Name (i used the Personaliced Shapes to add the parrot),
and finally you will get this:

Conclusion

Well I hope you enjoyed the tutorial, if you have any questions be sure to leave a comment below!

Network Icon in Photoshop

Page 1 of 1

Description

In this tutorial we will be creating a  nice looking and useful pixel

icon which can be used in any software application related to networks.

Objectives

In this tutorial we will be creating a cool icon for software

application.

• Learn how to draw a simple pixel drawing using pencil tool.
• Using gradient.
• Adding pixel shades.

Final Result:

Step 1:

Create a 35×35 pixel file. Create a new layer by pressing shift+control+n

together. Either use control+’+’ or zoom tool to zoom upto 1200%.

Step 2:

Set the foreground to black. Select 1 pixel wide pencil and draw this

shape.

Step 3:

Draw another shape under the box with the pencil.

Step 4:

Select Rectangular Marquee Tool and select inside the box

as shown in the figure.

Step 5:

Now, we will use Gradient Tool to fill the selection. For that, set the

foreground color to #245C29 and

background to
#316659. Click on  Gradient tool. Select

foreground to background gradient type and linear

gradient to fill the selection.

Image after filling the selection with gradient tool.

Step 6:

Draw 3 small lines with pencil tool. Change their colors as shown in the

figure.

Step 7:

Draw a line below the ‘Monitor’.

Step 8:

Draw another line as shown in the figure.

Actual view of our newly created drawing.

Step 9:

Duplicate and place the first layer as shown in the figure.

Step 10:

Zoom upto 700% and draw three black color lines connecting the monitors.

Now view the actual size of the file. Our icon is ready

Watercolor Effect in Photoshop

Description

This tutorial will teach you how to create a water color effect on any photo of your choosing

Objectives

• Learn how to use filters to create a realistic water color effect

Sometimes we need to convert normal images to painted ones. This tutorial helps you to achive that goal.

Open any file of your choice.

We will now apply dry brush effect in the image. For that go to filter>artistic>dry brush. Give the values as shown in the figure.

Image after applying dry brush effect.

Press control+f to repeat the last filter. Here it is dry brush.

You will notice that our image is turning to a water color painted image. Now go to filter>stylize>diffuse and apply these settings.

Go to filter>blur> smart blur and apply these values.

Our final output. Compare the original and final image.

Whiteshading Website Layout V2

Download the WordPress theme!

Objectives

In this tutorial you will learn how to create a smooth style website layout with a technique I have dubbed Whiteshading, this is Version 2 of the popular tutorial

• Fundamentals of Web Design
• Color choice ideas
• ‘Whiteshading style’

Difficulty Level: Intermediate

Final Result:

Zoom

CSS Web Header Beginner Tutorial

One of many css tutorials for beginners

Welcome to the CSS Header Tutorial! Today we are going to be building a scalable cross platform header which will validate strict XHTML on W3C. Our finished design will look like this:

This CSS Web Header Tutorial is an excellent supplement to all of our photoshop tutorials.

Note: This Tutorial assumes you have a basic knowledge of HTML/CSS editing

Click image to preview CSS Header

Step 1: Your going to need to download all of the images that I use here:

Download CSS Header Files
(size 14.1KB files: index.html, headtop.png, logo.png)

Make sure you save all the files in the same directory!

Step 2: Your going to need to open a text editor (like Notepad Start – Run – Type Notepad) to edit your HTML and CSS create a file named index.html Tip: I personally use VIM as an editor.

Step 3: First of all we need to create the HTML of our website and assign all the various areas different ID’s

index.html

————————————

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
<head>

<title>CSS Header</title>
</head>
<body>
<div id=”wrapper”>

<div id=”header”>

<div id=”logo”>

<img src=”logo.png” />

</div>

<div
id=”mainMenu”>

<a href=”link”>Home</a> |
<a href=”link”>Download</a> | <a
href=”link”>More Links</a>

</div>

</div>
</div>

</body>

</html>

Lets break that down:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>

That bit of code declares your website as an XHTML website, which helps be more cross browser compatible (e.g. Internet Exploer/Firefox)

The rest of the code assigns the areas of your page to different ID’s so you can style them in CSS e.g.

Right now your website wont look like much so you will need to use CSS to design it

Open a new document and save it as style.css in the same directory as index.html

Let’s look at the coding for style.css

———————————-

body{

margin: 0;

padding: 0;

font-family: Verdana;

}

a{

text-decoration: none;

color: #FFFFFF;

font-weight: bold;

}

#wrapper{

width: 100%;

background-image: url(‘headTop.png’);

background-repeat: repeat-x;

}

#header{

width: 80%;

height: 194px;

margin-left: auto;

margin-right: auto;

position: relative;
}

#logo{

float: left;

margin: 80px 0 0 0;

}

#mainMenu{

float:right;

margin: 160px 0 0 0;

color: #FFFFFF;

font-size: 11px;

}

Alright so we will look at it from the top, we first change the body attribute to have no margins or padding this allows the website to be Flush with the window, we also change the Font to Verdana

Next we change the appearance of the links (the a attribute) set it text-decoration to none (no underline) color to #FFFFFF (white) and it’s weight to bold

Now the wrapper is quite interesting. we set the width to 100% of the entire page, set the background image to ‘headTop.png’ and the background-repeat to repeat-x. what that does is makes the background only repeat on the x (horizontal) axis so that it doesn’t spread across the entire page, it only spreads on top. Thats a pretty nifty attribute

Hopefully you are noticing how the #idName controls the id that’s in the HTML e.g. #wrapper controls the div that was given the id of wrapper

The next id we change is the header Which is where the logo and the links are. The width is set to 80% of the page height to 194 pixels (the height of the background image) notice the margin-left and margin-right are set to auto, this is what causes them to center.

Now for the Logo it is set to float: left, this allows it to align to the left of the div without ‘pushing’ things down. I used CSS Shorthand on the margins like this margin: 80px 0 0 0, what does that mean? Well it’s like this margin: top margin#, right margin#, bottom margin#, left margin#. So essentially I only set the Top Margin to 80 pixels which pushes the logo down 80 pixels.

For the Main Menu you do essentially the same thing as the Logo except float it to the right and push it down a bit more pixels.

Don’t forget to link the HTML file to the CSS file like so

Goes into

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
<head>

<link rel=”stylesheet” href=”style.css”
type=”text/css” />

<title>CSS Header</title>
</head>
<body>

My advice is to use this tutorial and then mess around with the settings until you figure out what they all do in CSS

Please Contact Us with any questions or comments

Thanks for reading

Beginner CSS/HTML tutorial

Intro to CSS/HTML

This tutorial is aimed at a few different people.

• Those who want to learn more programming/scripting.
• Those who are tired of trying to read messy HTML files.
• Those who have procrastinated staying with the times.
• Those who just don’t anything.
• And finally, those who just want to make their site look good!

Reguardless of why you are reading this you are already well on your
way to having a good looking site.

HTML

So you want to make a web site huh? Fine. See if we can learn you a
thing or two.

I’m not aiming for any kind of website in particular, I’m just going
to give you the steps on how to create the basic parts that you will
need to create your own website. This means you’ll have to do some
coding. We are going to use a language called HTML (Hyper-Text Markup
Lanuage). HTML is very easy to use, and so I’m not going to give you a
discourse on it. We’re diving right in.

First we’re going to need a place to write our code for our website. For
this tutorial we’ll use Notepad. Any text editor will do though.
If you don’t know what that is don’t worry. I’ll get you there.

• Click on Start
• Click on All programs
• Click on Accessories
• Click on Notepad

Once you have your Text editor open put this code into it. Don’t
worry, I’ll explain everything.

<br /> <html><br /> <head><br /> <title></title><br /> </head><br /> <body><br /> </body><br /> </html><br />
This is as simple as it get in having a skeleton to work with. These
are the most common HTML tags and in virtually every web page. At any
time you can save your work and view it in a web browser.

• Click on “File”.
• Click on “Save As”.
• Type whatever you want the name to be and put “.html” at the end of it.
• Then click the drop down arrow on “Save as type” and change it to “All Files”.
• Save the file wherever you want.
• Double click on the file after saving it and it will bring it up in the browser.
• Now all you have to do is go to “File” and click “Save” every time you update your code.
• As you go through this tutorial or as you code, save often.



The
first tag is the “html” tag. This tag tells the browser “Hey I’m coding
in HTML here!”. The “head” tag is where we can tell the browser as well
as the server a lot of things. The only thing we’ll concern ourselves
with though is the “title” tag. The “title” tag goes in side the “head”
tags. Whatever you put inside those “title” tags will be the title of
the Web page. For example. Look at the top of your window or tab. It
says “Beginning CSS/HTML”. I did it because I have this code in my
page

<br /> <head></p> <p> </head><br />

Cool huh? Now we come to the “body” tags. This is where we get to the
meat of this business. The “body” tags are basically where everything else
goes (pictures, links, etc.).

Now take note for every tag I make,
I have a closing tag to go with it designated by the “/” in the tag.
These are a requirement. If you don’t agree then you just got an “F”
and I’m not telling you anymore.

Now I’m going to give you some stuff to put inside those “body” tags
of yours to give a little bit of substance to your page. We’re going
to start with a the paragraph tags. The paragraph tags are in the form
of

<p>This is a really boring paragraph</p> <p> See? No sweat.
“P” for paragraph. There’s nothing to it. Just put that code inside
your “body” tags and your good to go. You got some substance. Don’t
worry though, we got more for you. And just like in writing your
school paper you can make new paragraphs as much as you would like
<br /> <body></p> <p>This is a really boring paragraph</p> <p>As is this one</p> <p> </body><br />

Check that out. The browser even knew to skip some space and start a
new paragraph for us.

I know that’s not overly exciting so how about a link? For links we
use what are called the “anchor” tags. The “anchor” tags are done like
this

<a href="http://www.google.com">A boring link</a>
The “a” stands for “anchor”. Notice we got something new. Inside the
first anchor tag we have the “href=…”. This is an attribute that is
assigned a value. The “href attribute” tells the browser where to go
when the link is clicked on. So “a” creates the link or “anchor” and
the attribute tells it “where”.

Now as studly as that was, we’re going to throw an image into our
web page as well. And a break and a list and a table, and I think
that’ll give us a nice page.


<br /> <body><br /> ..<br /> <img src="http://psdesignzone.com/images/beginnerCSS/mypic.jpg" /><br /> </p> <ul> <li>This is a lame list</li> <li>This is a lame list</li> <li>This is a lame list</li> </ul> <table> <th> <td>What a cool table</td> </th> <tr> <td>I want to cry</td> <td>Me to</td> </tr> <tr> <td>Stop crying</td> <td>We&#8217;re about to learn cool stuff!</td> </tr> </table> <p> </body><br />

If you look at it carefully you can almost read it as if it was
english. For an image you have the “img” tag with the source (“src”),
attribute to tell where the image is. We have a break in the page for
some white space “br”. There’s the “unordered list” (“ul”) tag. Which
basically means you have a list with no order (bullets). I’ll let you
try and guess how to do an orderded list. Then we have the “table” tag.
If you have used Excel before then you know what a table is. It’s
simply a grid to make things look nice and organized. You first declare
your rows (“tr”) and then at you do you header (“th”). Then when you
go to your next row you insert your data (“td”).

Make sure you close off all your tags. Some of them like the image and
break tags don’t have anything out side the initial declaration so they
are closed by having the “/” at the end of the statement right before
the closing bracket.

How’s that? You made a web page. Now lets make it look a bit nicer.

CSS

Probably the first thing you need to learn is when you make your HTML
file. Don’t do anything extra. Don’t do something along the lines of


<body background='blah blah'> Nope we don’t do that. Leave that
alone. Just don’t touch it <body> That’s all you need. You don’t want to try
and make your site look good in the HTML file. In fact you want your
HTML file by itself to look like you just started learning. White
background, no font color, no centering anything. Just leave that all
alone. I promise you won’t regret it.



That is what your HTML should look like. Don’t try and spice it in
any way.

Enter CSS!

I’m going to insert one line into that HTML file between the “head”
tags

<link rel="stylesheet" type="text/css" href="css/mycss.css" />



And we go from this



to this



CSS Is the design/style for your website and HTML is the content. Seperating
your content and style gives your code a lot more readability preventing
confusion and making it far easier for someone else you work with to
modify your code if needed. How is this done you ask well I will show
you the css code and explain each part. Take note in the line we
inserted into the head tag

<link rel="... at the end of it
we have href=&#8221;css/mycss.css&#8221; /> This is telling where the
css file is. Now lets take a look at the file. Don’t worry this one
is short.
<br /> /* CSS Document */<br /> body{<br /> background-color: #000000;<br /> font-family: Verdana;<br /> font-size: 11px;<br /> color: white;<br /> }<br />
If you put the tags /* and */ up then anything between them is just
a comment. When you code, comment often so you remember what you are
doing and others will be able to see what you are doing also.

The actual code starts off with “body”. This is telling the browser
that we we’re going to add some style to everything inside the body
tags. In CSS “body” is what would be called a Selector becuase it is
what we are selecting to modify. Then we proceed to insert properties
and their values with which we are going to make our site look good.
The properties and what they do are self explanatory because you
probably recognize it from trying to do that in your HTML code from
before.

Learning CSS will save you a lot time, coding, space, headaches,
disease, plauges, and even from Armegeddon (almost anyway). CSS is a must
go ahead and continue with more tutorials. This one has served to be an
introduction to what CSS is and can do.