Archive for web graphics

Learn to Create Your Own Minisite Graphics

It usually makes sense to have a professional graphic designer create your site graphics. Unless you’re a graphics wiz yourself, your site will look much better with a pro behind the wheel. Plus, time is money, and it only makes sense to outsource work that would take up time that you could be spending on profit-producing activities.

If I I haven’t convinced you that it makes sense to outsource your graphics work to a professional, here’s a site providing free videos to help you learn how to create your own site graphics using Photoshop. The videos will show you how to create all of the graphics and buttons you see on those sales minisites. You’ll also learn how to create a complete minisite template as well as a video squeeze page layout.

A comparable set of videos might set you back between 30 and 50 bucks, but these training videso are currently being offered for free. You might want to check them out now while they’re still available.

http://www.diysalesgraphics.com/



Customizing a BANS Template

Customizing a BANS template can be quick and simple.  And, if you’re really daring, you can completely overhaul the entire layout.  This requires a bit of knowledge of CSS, and it doesn’t hurt to have a little knowledge of PHP programming, too.

But to just make some basic site changes that help to make your site stand apart from the rest of the crowd, there are a few quick things you can do:

1. Select one of the base templates.  Any template will do.  I usually select one that has the logo section centered on the screen, but you can choose any theme.

2. Create your own logo.  This is important because the basic template includes a blank gray logo with the name of your site in large text.  You want a good graphical logo.  But even if you’re not an artist, you can use the graphics software of your choice to create an image 968 pixels wide by 180 pixels high.  Even the Paint program that comes with Windows will allow you to create a jpeg image that will suffice.  I prefer PhotoShop, but I also use Paint Shop Pro and GIMP.  GIMP is open source, so it’s a good choice if you don’t want to shell out the cash for PhotoShop.

Now comes the fun part.  You get to create the logo.  And if you’re not an artist, you may want to get help with this part.  You want your design to look professional.

Once you have your logo image finished, save your file as logo.jpg.  You can easily upload the new logo to your website through the admin panel.  Click the “Template” button to go into the editor and click the “Upload Logo” link beside your selected template.  This will allow you to locate and upload the logo you saved.

3. Remove the title from the BANS template by clicking the header.php link beside your selected template. Don’t worry if you don’t know what you’re looking at.  You don’t have to for this. 

Just find the words <a href=”<?php print URL_PATH.”/”;?>”> <?php print SITENAME.”";?></a>.

Then delete that whole line.  Don’t worry, it won’t break anything.  That’s just code to print your site name and make it a clickable link.  Be sure to click the “Save” button at the bottom of the page to save your changes.

4. Now you can customize the template even more by changing the style sheet.  To do this, click the styles.css link beside your selected template.  This will open up the style sheet file for editing.  Then you’ll want to open Notepad, select all of the text in the style sheet editor and paste it into the Notepad window.  This will preserve the original style sheet in case you make a change that you’d like to reverse.

Changing Colors

Now look for lines that include the word “color.”  The number value beside the “color: ” tag is a hexadecimal value that indicates the RGB (red-green-blue) value to be used for a particular part of the website. 

You can use your graphics program to choose a color and get the RGB value.  This is the easiest way to get the number to use for a particular color.

The number is actually the combination of three values – one for red, one for green, and one for blue.  So, if you see a value like #000000, this is black.  The first two 0’s are the red value, the next two are the green value, and the final two are the blue value.  They’re all 0, which means red, green, and blue are all turned off.

But the numbers are hexadecimal (base 16), so they don’t range from 0-9 like you’re used to.  They range from 0-16.  And since we don’t have digits to represent value greater than 9, we use the first several letters of the alphabet instead.  So, A = 10, B = 11, C = 12, … F = 16.

Since all 0’s is black, it makes sense that white would be the exact opposite – all values turned on.  And since F = 16, the value for white is #FFFFFF.

If you want red, you can use #FF0000.  Green is #00FF00.  And blue is #0000FF.

You can vary the values of each to get different shades.  And combinations of red, green, and blue will give you just about any color you can imagine. 

Changing Borders and Fonts

You can also change the borders and fonts of any section of the site.  Just find the corresponding tag in the style sheet and change it to the value of your choice.  After making a change, click the “Save” button at the bottom of the page to save your change.  Then click the “View Store” link at the top of the page to see your latest changes.

Advanced Changes

You can make many more advanced design changes by altering the style sheet.  If you learn the rules of CSS, you can learn how to move parts of the design around to completely alter the site layout.  The sky’s the limit when it comes to the ways to customize a BANS template.  I’ve seen many unique designs that in no way resemble the original BANS templates.  Making these types of changes will help your niche store website stand apart from the crowd.

, , ,

Quick and Simple E-Covers

E-Covers are great for helping your customers visualize your information product.  Whether you’re selling software or an ebook, your sales will improve if you have a visual representation of your product on your site.  This is because your customer will actually perceive your product to be more valuable because we are all accustomed to buying books and software in boxes. 

So, how can you create an e-cover? 

If you have a copy of PhotoShop, you can buy a set of action scripts to automate the process.  These action scripts will allow you to focus on creating a nice flat design for your book or software cover.  You may then run the action script to have a box or book cover generated from the flat design.  The script will use Photoshop’s perspective tools to give the cover a 3D look, and it will also add a reflection and shading to make the image appear more realistic.

You may also purchase a software program specifically designed for creating eCovers.  I believe one of the best programs is The Web Graphics Creator.  It’s often difficult to find in stores, but you can purchase it on Amazon for under $30.  No, it isn’t a perfect solution.  You can certainly make better images yourself using PhotoShop.  But if you don’t want to spend $300+ for PhotoShop, or you’re not really comfortable with your artistic skills, this program may be just what you’re looking for.

, ,