Website Graphics
Why You Should Use Graphic Templates
January 13, 2012 | 
Author When it comes to graphics, most Internet marketers shy away from using graphic templates whether it’s ebook covers, website layouts or promotional banners because they firmly believe that by using graphic templates, they are tarnishing their own business. They want to own a unique identity and hence will always find a professional graphic designer to do the job. Well, you’re in for a big surprise!
When you purchase a graphic template, you will be able to customize it to an extent or even build a totally new design based on it! What’s the point of using the template then, you say? Well, it serves as a source of inspiration and ideas for a totally new design. You can’t derive anything from a blank canvas, right?
On top of that, you are actually saving a lot of precious time that you can otherwise spend on more important matters like developing new products or market your products. When you buy a pre-made template, you only need to edit a thing or two to give it an identity of your own, and that gives you more time and flexibility to work on other stuff.
Okay, let’s say you argue that hiring a designer to do the job is equally fast. That may be true but don’t forget, hiring a professional designer to do a custom design for you will cost you a lot of money. Unless you need a totally unique identity that you are aiming to establish firmly in your niche market, you don’t need to get a designer to design it for you.
Not all graphic templates are suitable, so you have to be careful when choosing one. Consider quality over the price, and you’re on your way to creating a positive image for your business while saving more time for more productive chores!
Posted in Web Design, Website Graphics | 
Tags: ebook covers, Graphic Templates, professional graphic designer, promotional banners | 
No Comments »
Web Design Photoshop Tutorial
Many people new to web design are confused by slices and Javascript rollovers and end up abandoning their projects out of frustration. The point of this web Photoshop tutorial is to keep things simple by creating a web page that uses only 2 graphics.
Start off by creating a banner and place it in the top row of a table that will contain 5rows and 1 column. The next row of the table will hold the text for your site along with photos you would like to incorporate into your site. Row 3 will hold a separator, row 4 will contain text links plus a copyright notice, ending with row 5 being a second separator.
For this example we’ll name this site My Site. Now we need to find a graphic for the banner. You can find professional level images at sites such as the iStock Photo galleries and at only or so for most images they are affordable.
Free stock photo sites are also available for perfectly good quality images.
One tip is to choose one color from your graphic and utilize various shades of this color for your banner for a clean, coordinating look. For the sake of naming a color for this example, we’ll go with green in a dark, medium and then light shade.
I find that by using the opacity slider on a sampled color you can create a nice variation. Open a new document and copy and paste the main graphic you’ve chosen into it. Now from the toolbox select the eyedropper tool and sample a color by clicking on it in your graphic. This will change the foreground color square in your toolbox.
With this done, open another new document and in the Background Contents select White and Click OK. With this document open, create a new layer by going Layer- New- Layer. Then go Edit- Fill and select Contents, Use: Foreground Color. This will fill your document with the color you just sampled. A valuable tip is to reduce the opacity with the slider and to basically adjust it until reaching the desired color hue. Once you find one you like, flatten the image by going Layer- Flatten Image. Again use the eyedropper tool, to change the foreground color square in your toolbox only now it will be the same as your newly created color. Click on the color square and the color picker will come up, and you can make note of the numbers of the color you had just created.
Scroll through your fonts to find one that appeals to you. Once you come across the one that you feel is right, play around with it a little. Adjust the tracking, the leading and the scale, or even a combination of these. Small adjustments can go a long way in making it much more personal and ensuring your site will stand out among others.
To select a font in Photoshop go Window- Character. In the palette you’ll see a list of your installed fonts. To tweak the settings you’ll need to bring up the Paragraph palette. You can do this by going Window- Paragraph.
If you are looking for new fonts, you have many options. Free font resources are available to you online.
For our example, create a new document that is 600 x 300 pixels. You can adjust this size according to your own design when you choose your own stock photo and plan the layout.
Now lets make a new layer by Layer- New Layer and call it Designer Pro. I’ll position the image on this layer and shrink it to fit. You shrink your graphic with Edit- Transform- Scale. The bounding box will have handles. Use the Shift Key to constrain proportions, and shrink your image by selecting the top left handle and pulling towards the bottom right. Drag inside the bounding box to move the graphic. Once it is to your liking, click OK.
Let’s go with a tinted background. Here we will go with a light green.
I select the background layer, Layer 1, and I fill it with the light pink by going Select- All, then Edit- Fill, and in the dialog box in Contents, I select Use: Color and in the Color Picker I enter FBE0EC.
The result is a 600 x 300 banner with a gentle background color and with the art placed on the left. We’re getting there.
I’ve chosen to apply a thick stroke to the background layer to make for a more bold design. First make sure the Layer 1 background layer is active, and make a copy with steps Layer- New- Layer Via Copy. Next double-click next to the layer name. Blending Options in the Layers Style dialog box will appear.
Select and then click on the word Stroke in the Styles options on the left side. I changed the settings to Size: 7px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type: Color, and I clicked the color swatch and entered D04E8C in the color picker. Click OK.
The border is just to balance out the design. Feel free to make changes and get creative with your own ideas.
Let’s place the names of the major sections directly on the banner. These will be the website links. We will be using image maps since it will be only one graphic.
Create a new layer for your words. Use the type tool to create the section names and then use the move tool to position them exactly to where you want on the banner. Remember to pick a color for your text that is darker than your background color to avoid finding yourself screaming obscenities and suffering major hair loss! Do this by going Window- Character. In the Character palette you’ll find a color square. Click on it to change colors.
You’ll need an HTML editor like GoLive or Dreamweaver to automate this process. This is really very easy. You create little “maps” over each word and enter the link destination. You’ll need to do a Google search on image maps to find a tutorial if you don’t have an HTML editor, or invest in a book like Elizabeth Castro’s HTML Quickstart Guide for help.
Create a new document. The width should be 600 pixels, and the height should be about 12 pixels. Fill this with your background color. Then, using the text tool and a dark color, type some periods, like this:……….. and place them in the file, centering them. Change the size and the spacing until it looks perfect. Now save this as a GIF file.
With your HTML editor of choice build a simple table that contains 5 rows and 1 column. If you’re going to use text link navigation below the banner instead of image maps on the banner, create an extra row so you end up with 6 rows in your table. Place your elements into the individual rows of the table and that’s it!
If you are on deadline and can’t cope with learning any more Photoshop techniques or HTML, here’s another solution. You can buy a ready-made template from Template Monster that you can use as a base to create web pages in Photoshop.
On the front page of Template Monster you’ll find a pulldown menu where you can select options and then carry out a search for a template. The templates are reasonably priced and pretty easy to manage in GoLive or Dreamweaver. In the past I’ve purchased a template solely for the color scheme and the images. On certain projects I found this was less expensive than buying stock photos. Visit Template Monster to see the wide variety of website templates that they offer.
I hope this Adobe Photoshop tutorial will help you create a really cool looking site, and I wish your new website a thousand years of good luck!
Posted in Tips and Tutorial, Website Graphics | Tags: copyright notice, Javascript, Transform- Scale, Window- Character, Window- Paragraph | No Comments »
Website Graphics: Giving Easy Access To Information
Did you ever encounter a website that is a representation of bad service, unorganized cluster of elements, and unattractive layout? It is probably the result of wrong picking of website graphics, or likely the absence of those. If you clicked a website and it made you stay for a longer while, it is because it is nicely arranged with graphics that are appropriate with the overall theme.
As we all know, the role of web graphics influences the overall presentation of a website, especially if it is catered to entertainment category or a product or service related one. The impression they create strikes at the first few seconds and which makes you feel browsing and learning more of what the website is trying to tell the audience. But if a visitor leaves quickly, it is either they were confused of the presentation or they cannot find the information that they are looking for.
Most of the internet visitors are looking for information. That is the reason why when building a website, it is important to consider easy access of the information. The website graphics are one of the elements which will provide the quickest method of communication; hence, the proper choosing must always be practiced. The graphics, through their silent visual communication, help the readers find the data they want. They convey message rather much faster than reading.
In today’s online fashion, people don’t want to linger in a website that they cannot find information within seconds. They don’t want to read all the content of the page unless they discovered it is exactly what they wanted. But with the help of web graphics representing the right information, they could decide to find out more about it by staying longer. The graphics are more detailed and contain link that directs the user to a page where the information is located.
But while web graphics convey attributes that create great overall impact, they can also be a factor to make the website not worthy stopping over. It is in this case why it is also important that these do not overwhelm the entire page and have to be easy to scan from header graphics to stamped background. The ideal way to use graphics is put them in a way that readers are directed into the link where the services or products are located without removing the focus away from the content.
Using many graphics or incorporating unnecessary graphics in a webpage can result to the page being congested. Aside from the distraction it creates to real content of the page, it can also become harder for the web page to load fast. Balance is an important element in a website. It must be applied not only to the content and the appropriate graphics, but on the page colors, shading, and lines.
There are many kinds of graphics that can be incorporated in a webpage. There are illustrations or vector graphics, where widest arrays of possibilities are available for drawings scanned as a picture, and rollover, where when the mouse rolls over a graphic it changes or reacts, whether to a color change or short animation.
Website graphics are great element that can make or break your website, so although they are made available in many different possible ways, use them appropriately so they will continue to lure prospects over your site.
Website Graphics: Create Or Download Them!
Unfortunately, it is not the product or service your site is selling that catches attention of the readers and visitors. Nor the long queue of positive testimonials located at the lower part of the page and left by hundreds of satisfied customers. You must know that before these are noticed, the website graphics make a great impact to catch their busy eyes and make their curiosity work to stay longer.
You see, majority of the internet users do not have enough time to stay quite longer in a web site especially if they think they could not easily find the information that they want in the page they have clicked. They even dont have a spare second to scroll more if they find the web page lacking the interesting element to stop them from switching to another browser. Let’s to finding another review related on this payday lenders only site.
You can make the visitors buzzing around and likely to click more if they find out your site has the professional attitude. And by using appropriate web graphics, you make this possible. So if you want that to happen, you might take creating and integrating website graphics into website more seriously. If you cannot afford to hire the services of graphic designing companies, you might as well learn to do them on your own.
Create or Download Free Graphics
Certain tools are available to help you do that. The main ones are Flash action scripts and Photoshop. For the creations of websites and graphics, the Flash action scripts will allow you to control and build vector animations, a must to spice up and add lively impact to a site. Photoshop is a great tool for creating and manipulating images. Nowadays, it is a leader in the industry, and which every graphic designer has in their computer tool kit.
But in the case that you don’t see yourself doing them yourself using those tools, you can always opt for the free website graphics available in the internet. You might worry about the quality; however, there are lots of websites offering high-quality website graphics which can be downloaded free of charge. You can simply browse from the collection, download, save, and integrate on your website anytime you want it.
But just like the paid graphics collections, it might be necessary for you to read and follow certain terms and conditions that the website may provide to avoid issues of copyright and similar things. Most of the website offering free graphics also provides free icons, business graphics, backgrounds, buttons and a lot more. So while you are at it, you might want to take advantage of these freebies and incorporate them in your website, so long as they don’t congest the page and create awkward impact to the overall representation.
How to Use the Graphics
There are many ideas on the use of website graphics but among them are:
-placing them in squeeze page to catch more attention to signup form and therefore increase conversion rate;
-adding them to sales letter for maximum sales;
-adding them to membership site or product download area earn people’s trust and add higher perceived marketing value
-providing the visitors easy access to the information where product or service is located
-giving viewers easy access to the product or service itself and convert it to more sales;
-and much, much more.
Graphics are truly amazing creations that do a lot of wonders not only to the website but more importantly to the business. Don’t waste those opportunities to income potentials create or use free website graphics available online.
Things To Consider When Choosing The Graphics For Your Website
Things To Consider When Choosing The Graphics For Your Website
Things To Consider When Choosing The Graphics For Your Website
If you’re just starting to create and design your online page, one of the greatest elements that you must work on would be the graphics for your website. They might not be as important as the text content of your site, but they make your site more enticing and appealing so that readers will actually come to reading your contentafter all, what’s a great content if no one will read it? Graphics also help readers understand your message well. They provide supporting explanations and they also make site navigation easier.
However, if you are to achieve all the mentioned benefits, you must properly and carefully pick all the graphics that you incorporate in your site. Random mix and match doesn’t work well when it comes to designing your online page. The graphics that you’ll incorporate should be well thought out to achieve the best results.
There are different factors that you need to look into when choosing the right graphics for your page. These factors include the following:
Bandwidth
This refers to the speed by which data is transferred from one point to another in a certain period of time. When you open a page, it is bandwidth that determines how fast or how long the page will load. The graphics you include in your site affects bandwidth, so you must choose the right graphics. Otherwise, your readers will need a lot of time to wait for your site to loadand that’s never a good thing because you risk losing them to sites that load faster. Bandwidth is directly affected by two aspects in your graphics, as will be discussed below.
Graphics Size
The principle is this: the bigger the size of your graphics, the slower your page will load because of bandwidth issues. And if you have a lot of graphics in a single pagefrom your logo to your photos and bars and linksit may take minutes before your page completely load, at which time your reader has probably transferred to another page already. Therefore, see to it that you choose graphics that are not too big, or find ways to compress your graphics with the right format.
Graphics Format
There are different formats for your graphics, and each format features different characteristics. The most popular in use are the Joint Photographic Experts Group (JPEG) and the Graphics Interchange Format (GIF). These two are known for taking up much less space compared to other formats, so they are easier to download. Other than size, another factor that the format determines is the color and quality of graphics, which will be discussed below.
Graphics Color
Of course, colors are primarily for attracting more visitors to your site and making it more interesting and easier to read. The color of your graphics is also one good criterion that must help you determine the graphic format to choose. The basic principle is this: graphics with more colors are ideal in the JPEG or JPG format while graphics with fewer colors are perfect for GIF format. Another thing that you must consider is the limitation that some computers pose when it comes to colors. Because there are computers that do not recognize some colors, it would be to your advantage if you use colors that are safe to all types of computers.
With all these things in consideration, it will be easier to choose the right graphics for your website to get the best benefits. With the right graphics, you can expect your readers to enjoy their website visit and come back for more next time.