Website Construction (Part_2)

Screen Side Panal_2

Pixel Art

Pixel Art Is a way cool way of adding three dimensional display, within the center portions of a side-bar…It is a complete art within itself, and supersedes the all ;powerful:” Blending Options” dialogue box, I told you, was so Important, (the” f ” sign at the bottom of your layers pallet.)  It is an incredible art I want you to learn, simply because of its super qualities you can easily develop!  It will inevitably make you a better Artist when it comes to designing Web-Pages…  This is an Art that requires major discipline, yet delivers major dividends in return!  It will open up a whole new world for you.

Remember I showed you shapes that I made with the line tool?  No?  Well anyway, those purplish figures with a gradient stroke applied, were made from just such blocks, I made, using the line tool (which resides within the custom shapes, tool, drop-down list).  I will be serious with you; These tool-bar shortcuts are the simplest of all because they require no modifier key, like ctrl, alt or shift…  Rather, they are single key short-cuts that you need, to shift from tool to tool, within the tool bar, on the left side of Photoshop’s page!  And tool-bar short-cut keys are the shortest short-cut keys you will ever use, so they are very easy to remember; Photoshop ensures that each tool-bar short-cut key, will be self descriptive in, and of itself…  I will explain this in greater depth, as I go.

How to turn Photoshop into a pixel Art program


Each one of those squares equals a pixel… And that’s only magnified to 700 times…  For pixel Art, you must magnify your screen to 3200 times!  Go into edit/preferences/units and grids; in the grids section, make the setting to one pixel, like so, illustrated below…  Then just magnify to 3200 times, fill with a background color of your choice (Medium grey) is nice for tubing.  Go to view/show/grid, and there you have your set up.  I made a workspace of it too, utilizing the swatches pallet, so I can easily change colors, and the navigation pallet so it gives a preview of a very, tiny world, and the layers pallet, so I can put things on top of other things and bevel them separately…  You’re working on a quantum level, so it doesn’t hurt to pan out to 100% now and again, just to see how you’re doing.  I saved three different sized file settings for pixel art: 64px. x 64px., 128px. x 128px., and 256px. x 256px. 

And I’ll tell you something odd.  Ever since I started working with pixel art (about three days ago), Photoshop has been placing temporary “pink” guide lines for me, that disappear, as soon as I place the object.  Has the program suddenly acquired a mind of it’s own?  Self assisting guide lines!  How cool is that?  There is a tiny program out there for FREE called naturally.  Pixel Art Studio.  The entire program is only a meg and a half!  LOL!  I know.  That’s still more brain power than the Federal Government has to offer.  You only have a 64 pixel grid, no guide lines to set things evenly apart, and no gradient or pattern fills to hurry up your work.  Photoshop simply has more to offer, and you can make your pattern fills right in the program.  So it’s more convenient as well.


Notice above, in the grid section.  Gridlines are set to one pixel, and subdivisions are set to 1…   Next, take the magnifying glass from the tool bar on the left, and magnify the file to 3200 times.  Then go into your view menu/show/grid.  Congratulations!  You’ve now entered the world of the extremely tiny!  If you will notice, I’ve set the swatches pallet, on the picture above this one…  Also, use the Navigator pallet (Windows menu), to see your work small, and how it might look, more tiny…  Double click layer 1 in the layers pallet and rename it “Background” and fill with medium grey.  When you are finished your pixel art, crop it to size, choose Edit,/Define Pattern.  You will notice, in the Fill dialog box (Edit Menu). that if you rest your mouse over a pattern you made, it will tell you exactly how wide it is in pixels, and that’s exactly how wide you make your side bar, to fill with the pattern, so it doesn’t repeat horizontally…


This example above, demonstrates how pixel art can make three dimensional objects (side-bars), within the center portion of the side bar!  This is something that the: “Blending options” dialog box just cannot do!  And yet I considered the blending options (The f at the bottom of the layers pallet} dialog box, the most powerful function within Photoshop…  That is, until now!  Behold, three dimensional pixel work performed on a very tiny level…  This all can be accomplished within Photoshop!  I usually use the bucket tool, short-cut “g” , without the quotation marks, to fill in large areas with color.

Tool-bar short-cut keys are among the simplest to remember, simply because the short-cuts require no modifier keys, only a single, short-cut-key letter, to switch from tool to tool.  You will need to remember only a very few short-cut keys for pixel art, and they are, without the quotation marks: “e” for the eraser tool, “b” for the brush tool (set to one pixel)…  The “I” key for the eye dropper, and “g” for the paint bucket.  That’s all you really need for pixel art.  As a special note: you must select the left top corner of the pixel square, with the brush tool, to actually select that particular pixel.  You can set divisions to 4 or 8 and make multi-column rows.  I choose to just duplicate each column of color, rather than constantly changing settings in the Preferences dialog box…  There’s no short-cut key for that either.

Window Screen_2

You can make strange things that you wouldn’t suppose possible, like this magnified image of a screen, I placed an insect upon…  You can easily make your own patterns, as long as one side is doing the same as the other.  This didn’t look like a window screen when it was finished, I just blurred it quite a bit, and it just appeared.  The world of the incredibly tiny, doesn’t always play by our rules.  You’ll see what I mean when you start.  Weird!

Who would have even dreamed?


Guide lines insure more accurate results

This is an excellent example of how guide lines help you to set up correct measurements between distant object, that your eye can’t discern.  To make the objects above, I merely clicked on the object using the alt key and the selection tool at the top of the tool bar, and pulled out a copy of the original shape I made, while I was using the line tool…  Here I have selected a shape and am using perspective to turn it around where it fits: Edit/Transform/perspective.  See how I’ve placed a guide line on the right handle, so when I move the left handles over, I’ll know just where to put them…


Not too shabby

Above, is the final result.  The rivets on the side bar , I made with pixel art…  After I made three, I selected them using the square marque selection tool.  Then I held down the alt key and made a copy to put below it…  Then I selected the six and made a copy of them, and so on; you can select things in blocks, and duplicate them, to save you time against what would other-wise just be a repetitive process.  Again, working on a pixel level came into play.  The header is one I made from a previous blog.


Intricate Details

Please take note of the pixel art above…  Those little, white dots, look like crosses at 3200 times magnification!  Don’t try to reinvent the wheel.  There are tip and tricks, to make your life easier while making pixel art.  I usually fill a mid-grey color in with the bucket tool, “g”.  If I want to switch to the brush tool, I press “b”…  The eye dropper tool is “I”… (you must then click on a color, to change the foreground color represented at the bottom of your tool-bar. ) The eraser is “e”…  If I want to switch between two colors I set as background and foreground colors, I press “x”.  This is a toggle key.  As is ctrl+h, to hide or reveal extras; like grid lines, guide lines, selections, etc.  These are very easy short-cuts designed for their simplicity of use, without leaving the work project.

I borrowed a diamond from custom shapes and sized it at regular screen size.  Then I zoomed in, and colored it in, after closing gaps a pixel at a time, so the colors wouldn’t leak out of the paint bucket and fill my whole page!  Once I completed a particular section up top, using the black arrow selection tool, I held down the alt key to make a duplicate, after selecting it with the rectangular selection tool (easy to do because everything is square at 3200 times magnification.) I held down the alt key and made a copy, and just dragged it down to the bottom position…  It saves you time if you don’t have to repeat what took time to make in the first place.  If you hold down the shift key, after you click to create a pixel, you can click it again, and drag a straight line out, no matter how off you are in the process, your line will be straight.  In the end, I crop it to size, and save it as a pattern.

What looks right may not be so


The above web-page layout I made, is a template, because it is flat, and no effects from the blending options dialog box have been applied yet…  Look at the squares on the left hand side.  If you examine them closely, you will see that some are uneven when compared to others…  This shows up as more prevalent, after blending effects have been applied, below.

We learn from our mistakes


It now becomes more than apparent, they (the squares) are uneven! I have fixed the problem, using guide lines ( you just pull them out from the top or side rulers, using the  selection tool (black arrow).  Else-wise, it would make for a half reasonable web-page.  You will find the flat fixed practice file in the gallery.  The header comes from a previous blog.

The Contour Editor


Using only the default bevel settings, I made these plain circles into rivets…  The guide lines helped me to space them evenly, under magnification 700 times.  If you double click the “gloss contour” square, with the white and grey diagonal sides, you will bring up the “Contour Editor” dialogue box.  Here, you can define your own contour styles.  Once again, why reinvent the wheel?  Google search: Carl’s Contours, and you’ll get a whole whack of new ones!  Then save them to the contours preset folder: C:/users/username/Roaming/Application data/adobe/Photoshop CS3/presets/contours.

To make your own contours, you simply select different spots along the line and move them to create hills and valleys.  You can test out your contour before you save it.  Delete all the other contours except the default  (straight lined) one.  When you feel you have enough contours, save them to the folder mentioned above.  And don’t worry, the old contours that you deleted, are still there in the folder with your new ones.  Just choose which set you prefer to work with, or you can append many sets together in your list.  They are very handy when it comes to applying beveling effects.

Bevel and Emboss

Bevel and Emboss Tutorial

If you can’t read the settings in this or any other tutorial throughout this file, hit ctrl and the + key to zoom in until it’s clear to you.  Remember how many times you clicked, because you will have to hit ctrl and the – sign, the same number of times, to zoom back out.  As you can see, I’ve applied a gloss contour to the header, and chose anti-alias to chase away “The Jaggies”.  You will notice that I changed the color of the shadow mode, to better reflect the color of the header, for a more realistic effect.

The Bevel and Emboss section of The Blending Options dialog box, shows you a circle with a small set of cross-hairs you can move about.  The closer you get to the center of the circle, the shinier the out-side surface edge of your bevel.  Under styles, Bevel and Emboss are selected.  Though not in this particular case, if you want a shinier shine, more like glass, check the contour box just below it.  It should be understood, that before you add any effect to any single object, you must uncheck the: “Use Global Light” check-box, else-wise, all of the objects will display the effect you’re setting.  It’s checked by default, and the cross-hairs are far out near the perimeter of the circle, also by default.  If you’re pleased with the effects you apply, you may save it here as a new style.

The dark red part of the header, on the left hand side was applied using:  “inner shadow”.  Simply change the shadow mode to the color you want.  This display has a line in the circle to represent degrees of rotation.  Uncheck the global settings box, grab the line near the outer perimeter for better accuracy, and set it to 180 degrees.  Set the soften dial to 0, (the size dial will indicate numbers, as you pull out your shadow to the distance you’d prefer.  Keep the direction up for these settings and the depth at 100%.  The technique is set to smooth.  You also have the choice of hard or soft chisel.  I prefer hard chisel, whenever I use it.

Utilizing Gradients


There are a few thing to notice about how I’ve utilized this gradient.  Notice that a gradient effect is the only thing in the blending options dialog box that I’ve applied!  I have checked the align with layer box.  The angle is set to 180 degrees, and the style is set to reflected.


For the end result, using the blending options dialog box, I added a 14 point stroke, chose the gradient option for that, and used the scale lever to line it up with the inside feature of the side-bar.  And I added a strong, drop shadow set to “0” and I blurred the background, so as not to look intrusive and to add depth and dimension to the potential page.  The blending options I’ve applied to the side bar can be saved as a style to apply on future side-bars, right within the blending options dialog box.  Now how convenient is that?  Be sure and save your blends.  It will save you time mucking around with all the settings in the blending options dialog box.


A little patience and imagination is all you need, to work with the blending options dialog box, a brush, blur the background a little, and all else stands out…  The object, is to make the background as inconspicuous as possible.  You want people to look at what you’ve written, not the background!  The header is new.  I have a separate one for you in the gallery at the bottom of this page.

Make backgrounds easy on the eyes

Blurring your background gives it a three dimensional effect;  it’s very effective in diverting the readers eye to the text at hand, or picture displayed, video performed etc.  Plus, they load up much faster…


A bit more about backgrounds

You don’t want your background to say much of anything really.  You want it to be neutral; nothing that’s going to be distracting to the eye…  Below is a typical example.  They shouldn’t be busy looking or distracting.  It should typically be colored to match or blend in with the rest of the colors on the page.


Cookie cutting shapes for headers and side-bars

Rattle Snake

I fashioned the header of the above page simply by making a rectangle, filling it with black. and surrounding the top, with about half the ellipse selection, inside the rectangle.  I then simply hit the delete key and I did the same with the bottom.  I added effects with The Blending Options dialog box.  The snake skin is a style I acquired off The Internet.  This is a fastest and easiest way to get tailored shapes that I know of…

New Headers




Green Fade_Header

Bended Header1Template

Brown Bent Header

I forgot to insert these in the gallery.  No matter.  Take a screen shot of them (windows key + PrtScn).  Enlarge them by going into Image/Image size, and choose to extrapolate Bicubic smooth (best for enlargements.)  Don’t try to just resize them manually, or they will just come out blurry. 

The gallery below contains all kinds of set up pages I made for you, as well as just plain backgrounds to easily upload to your site, and a few extra headers I made…  I could go on about out-side programs that work with Cascading Style Sheets so you can build your own themes as well, but that’s another blog.  If you have any questions, be sure to enquire, and I will help you as best I can.  OK?  Enjoy! 

Next in this series, we will explore how you slice up various parts of your web page, and using CSS within a web-site building program (Dreamweaver CS3), to make outstanding web-sites, and easily upload it to your site.  We’ll find out how to express everything from fonts to colors and effects, just using CSS (Cascading Style Sheets).  And don’t worry!  The process is far less painful than you’d think…



One thought on “Website Construction (Part_2)

  1. Pingback: Homepage

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s