Thursday, March 25, 2010

Website Graphics - Free Photos

A good place to get some good free photos is www.sxc.hu. You have to sign up for a free account but it is worth it.

You can also search paid for photos on the same site.

Why Fireworks?


Many people have been asking me why I use Fireworks. Well I was first directed to Firworks when Dreamweaver owned the product and one of the top web designers in Toronto told me it is almost all he uses. Why? Because of speed. In designing graphics for a living, time is money and the faster you can build website graphics, the more you make.

The advantage to me is that when you move your cursor around, the element you are touching automatically selects the layer it is on. I'm not sure if this is in photoshop but I am pretty sure it's not. If it is it's hidden. This feature alone saves me hours a week in designing my web graphics.

The other advantage is that it can use photoshop filters you already own.

Anyway, you can download a Free Trial Version at: Adobe Fireworks CS4

I cannot attest to this version as I still use Fireworks 8.0 as it does everything I need it to do on my slow computers and integrates into Dreamweaver 8 perfectly.

Aweber Builds Visitors Instead of Throwing Them Away

I use Aweber along with my squeeze pages in order to build a relationship with my customers. You can see an example and how it works by going to http://www.howtomarketyourbusinessnow.com/

It is very cheap and has paid for itself MANY TIMES over each month.

If your thinking about an email marketing (autoresponder) service, I cannot say enough about them.


Turn One-Time Visitors Into Active Subscribers with AWeber Email Marketing

Website Graphics - Create Sales Page Headline Graphics Like the Pros

Ever wonder how to create better headline graphics for your sales page or squeeze page?

Check out this video to find out. Again it is done with Fireworks, but you can also use Photoshop. GIMP is a bit harder to do this trick with.



Remember, you can watch the High Definition version on youtube here.

Wednesday, March 24, 2010

Website Graphics - How To Mix Black & White and Color In One Image

This is a really cool web graphics trick that you can do in just about 2 minutes. It turns an area of the image into black and white and lets you select which area you want to remain as color. It can be done in Fireworks (shown here) or Photoshop or GIMP.


Website Graphics - Cheap Webspace

People often ask me for a good place to get web space at. Blogger here is ok but once you setup a professional website to install your website graphics, you will need an Internet Provider such as the one I use.

JUSTHOST




It is ridiculously cheap, has unlimited bandwidth, tons of free tools including WordPress Blogs and you can add domains on the same account relatively cheaply.

Anyway, it is the only host I am using for my clients right now so you may want to check out their specials. I think they have one right now for $3.45/mn and it includes the domain registration. I'm not sure how long that special lasts so you might want to check it out today.

Oh yeh, I also like it because they are one of the only places that accepts Paypal!

Website Graphics Trick - "LOST" Style Reflections

This is sort of an over-used technique but a cool and easy graphics trick nonetheless.

You can use FIREWORKS, GIMP or PHOTOSHOP to do this trick.


Bring the Web Graphics Designer Out In Yourself

I personally learned website graphics design by looking at people's sites and trying to emulate what they were creating. It worked, but it took me years to learn probably what I could have learned in a couple days using a video course such as the one shown here.

Most Website Graphics Internet Marketers need to know these skills quickly in order to start making a couple bucks, so the course pretty well can pay for itself in a very short time.

One of the best things about this course is it teaches you how to use a free graphics tool (GIMP) instead of having to buy a $299 copy of software.

Anyway, check out Mel's sales page and give it a buy if you think it interests you. It is only $27 for like 23 Videos!


Mel Bryans's Graphic Design Masterclass
The secret to creating outstanding graphics for your products.



CLICK (and save about a billion hours of learning)

Website Layout - Using Tables to Control How a Visitor Views Your Site

Some website graphics designers want to splash graphics and text the entire screen width. I just hate it. White space defines more of a website then actual graphics headers and streams of text.

Only 1% of my website visitors has a screen resolution set below 1024 pixels wide. (by the way, Google Analytics is free tool you can use to track tons of data about your visitors).

This is why I always use a main table with no borders to control how people can view my web pages. In other words, I never use a percentage of the window because this is an unknown.

I usually set it to around 800 to 1000 pixels wide. People do not want to read a long sentence without a wrap around. I mean, just look at this blog. Can you imagine a sentence that is 25 words wide! It's just uninviting.

This way I know exactly how everyone is going to view my web page and the graphics on it.

See one of my sites as an example. It has a main table set to 750px.

Control those views :-)

Tuesday, March 23, 2010

Website Fonts


Most used fonts in website graphics, website design or web graphics in general:

Impact: Headlines, Logos
Arial or Verdana: Body of Text, Figures Explained:
Times New Roman or Garmond: Make It Look Like a Professional Book
Cool Handwriting Fonts: Hand of Sean or Just Act Casual from Dafont are awesome.

Myriad Pro Semibold: Apples Website Font. I use on graphics. Don't use on your website text though as most people will not have it installed on their system.

Obama or Clinton Font: Gotham (this free one is similar)

You can get some of these fonts Free from http://www.dafont.com/ or you can buy others from here or from Linotype.

When in doubt, I use Arial because it is easy to read and consistent.

Do not use too many fonts on a give page. Try to limit it to two, three if you know what you are doing. Remember, just as sometimes one word can replace 5, one font can replace 5 also.

Using Premade Web Graphics

Sometimes I just don't have the time to create eye-popping graphics to use on my own sales pages and just want to grab a few really cool, modern graphics. It saves having to scour the web for graphics, then emulating what I found in fireworks or photoshop.

In this case I grab a few from this product: Web 2.0 Graphics

It has like a Bigillion Buttons, Medallions, Add To Cart, Download Buttons and other cool graphics for only $29 bucks and change. At rates of up to $100/hr I charge clients, I am saving the cost of this web 2.0 graphics package in less than 20 minutes.

They are all web 2.0 style graphics that will grab your visitor's attention and hold it.

I mean look at how cool this one looks:Or this one:So anyway, quickly modernize your site. Swing over to Drew Castle's site and download a copy of his Web 2.0 graphics package.

Website Graphics Formats Explained

GIF - Graphics Image Format or Graphics Interchange Format. Bitmap graphic format. Used if you want to reduce the image file size by reducing colors. I also use if I need an exact color to match with something else instead of using a JPG.

PNG - Portable Network Graphics. Fireworks native format. Another Bitmap graphic format. I am using PNG almost always not for website graphics and web graphics in general.

ANIMATED GIF - A GIF file that can be used for a very limited animation.

JPG or JPEG - Joint Photographic Experts Group, Image that is compressed. I use only for photos. I used to use for text graphics and general website graphics or web graphics but changed to PNG for a more controlled image (especially with dreamweaver).

BMP: Bitmap Uncompressed - Too big to use for website graphics. Loads too slow. Old school. MS Paint native format.

Website Graphics Software I Use To Make Cool Custom Graphics

The most common tools I use to create website graphics, website backgrounds, website banners, web design graphics and web page graphics are as followings:

Vector Graphics, Vector Drawing: CorelDraw. I use it because I know it better than Adobe Illustrator. I usually only use vector tools to quickly envision a website layout.

---

---

Bitmapped Graphics, Pixel Graphics: For fast work I use Adobe Fireworks. For detailed photo editing I use photoshop. If you use Dreamweaver, Fireworks integrates much better into it. Microsoft Paint is simply not powerful enough to use for website graphics -- such actions as layers and masks are not possible. I will explain this more in later posts. You can also use the free software called GIMP which mimics the web graphics capabilities of Photoshop but is sometimes a bit difficult to use. If I had to choose only one tool, it would be Fireworks.

Photoshop Filters, Graphics Filters: I use a lot of filters including the stock filters and Alien Skin Eye Candy. The graphics filters I use most are drop shadow filter, glass filter and metal filter.

Well those are pretty much the only graphics software tools you need to make killer website graphics.