| iSmart Create Product Page: |
|
We'll begin with some good examples right here on our site!
The iSmart Create page clearly show a clean and simple combination of images and content. The header and sub-header titles are nice and bold and the iSmart Create product image breaks up the feature points.
The bold blue arrow icon is used instead of boring bullet points to emphasize important points about the product. The overall colour theme for this page helps to distinguish it from the other products on the site. |
The partner programme page uses a different layout along with custom buttons as a 'call-to-action'
We can see that the graphic elements help to break up the copy and catch the viewers attention, allowing them to read further. Beneath the main copy we see two product images, although the 3D product images are not really tactile objects they allow the user to connect the product to a visual element.
The 3D product image is becoming a popular theme with a lot of software related products and services.
|
|
|
The orange 'join now' button is another nice graphic element commonly known as a 'call to action', the design is simple yet effective with the use of modern effects like gradient shading ( creates a subtle 3D lighting effect ) and round edges - a common but very effective style. |
|
The iSmart homepage features some really cool buttons and images to break up and help structure the content
The image below gives us a closer look at the main graphic elements on the page. Similar to the orange 'join now' button we can see the same style and approach being used soft gradients, a call-to-action, and eye catching icons/symbols - in this case the iSmart logo being used to enforce the brand. The 'FREE Website health check' button features a dynamic image of a Dr's stethascope on a heart to really emphasise the ' health check ' feature When creating buttons its a good idea to follow a similar approach seen in these examples.
Things to consider...
1: Use vibrant colours that complement your brand as well as soft gradients to create more depth / substance
2: Use bold and distinctive header styles, make sure your Header, sub-header and links are obvious
3: Think about using interesting photos or graphic symbols to emphasise a feature such as the ' FREE website health check ' button
4: A good place to use icons would be on a homepage, use distinctive graphics to emphasise the different areas, products and features on the site.
|
This is a quick guide to creating a stylish button by using an online tool called AS Button Generator
The image below gives us a closer look at the main graphic elements on the page. Similar to the orange 'join now' button we can see the same style and approach being used soft gradients, a call-to-action, and eye catching icons/symbols - in this case the iSmart logo being used to enforce the brand. When creating buttons its a good idea to follow the appraoch seen in these examples.
STEP_01:
From your internet browser go to http://jirox.net/AsButtonGen/. The first thing you'll see is the default red button on the stage. Take a moment to look at all the tools available below the main stage. Top |
STEP_02:
The 1st tab is the ' Colour / Form ' tab. Click the colour square and select the colour you wish to give your button. Click 'OK' to continue. Top |
STEP_03:
Use the remaining functions in ' Colour / Form ' to specify the size, roundness, border colour and thickness of your button. Top |
STEP_04:
The next three tabs are ' Gradiation type ' , ' stripe ' & ' filter '. These options are self explanatory and focus more on the refinements of button design. For the brevity of this tutorial we'll move on to the main steps. Top |
STEP_05:
The 'image' tab enables you to add a graphic to the button, such as an arrow, or a specific symbol to emphasis the buttons purpose. Click on ' Insert image' and select a suitable image from your image folder. Top |
STEP_06:
As an example we have inserted this type of graphic ( 38x39px transparent gif format ), a simple arrow inside a circle. Use the moveable cursor to position the image exactly where you want within the button. Top |
|
STEP_07:
The final tab is 'Text'. First click on the 'insert text' button, some sample text is created 'Edit Me'. Make sure the text is selected on the stage. You will notice the words are also visible in a large text area at the bottom. Just click inside the box and use the text tools below to change the font, colour, size and style attributes. When you are finished click 'Apply' to see the results on stage. Top
THE FINAL RESULT:
Click here or on this screenshot thumbnail to see the final result on our demo site. You will also find some examples of graphic icons used in sentences to emphasize each area or feature. Top |
STEP_08: IMPORTANT UPDATE*
Now that we have all our elements prepared its time to save our button. This program only allows us to save images as .PNG files. Click 'Save', edit the file name, click 'Save' again and you're done.
* Users of iSmart Create please bare in mind:
you may have issues uploading .PNG files with File Manager, only GIF and JPEG are compatible,
no problem! Just follow these steps to convert the file format.
1/ Open your favourite image editor ( photoshop, paintshop pro , fireworks, etc... the free alternative is to visit Paint.Net or gimp.org and try out these popular open source image editors. )
2/ open your PNG button.
3/ from the file menu choose 'Save for web' or 'Save As' ( depending on your editor )
4/ the 'Save' window should allow you to choose from a list of available file formats which include .GIF & JPEG. ( If your button is transparent you should only choose GIF. )
5/ As you continue you should see an option to maintain transparency if you are working with gif, if not, then the image options available are probably for image quality. choose your image settings and save the file as .GIF or .JPEG. Top |
LEGAL:
This is a list of open source icons and graphics which are for you to download. They are licenced under Creative Commons but are specifically allowed for use in private or commercial web-related projects. You will find that the general image formats for these icons consist of GIF and PNG* ( with transparency ), most popular image editors will enable you to work with these formats. Please bare in mind that our CMS currently does not support the PNG* format therefore we have included some tips on converting PNG images to GIF or JPEG.
Doctype Icons v2:
42 free icons of generic document type symbols including Adobe software symbols, Word software symbols and more.. - Transparent GIF format - 16x16 pixels. Courtesy of brandspankingnew.net
[ Zip Download ]
Mini Icons:
A is a set of 144 GIF icons available for free use for any purpose. Courtesy of famfamfam.com
[ Zip Download ]
Mint Icons:
Mint icons are a small set of tiny PNG web icons. Courtesy of famfamfam.com
[ Zip Download ]
Exploding Boy Pixel Icons:
Thirty-one free icons which can be used for application toolbars, content management systems, web applications, anything you like. Courtesy of exploding-boy.com
[ Zip Download ]
FLAG ICONS:
Flag icons are 247 icons in GIF and PNG formats representing most countries in the world as small pixel icons. These flag icons are available for free use for any purpose with no requirement for attribution. Courtesy of famfamfam.com
[ Zip Download ]
STATIONERY VECTOR ICON SET:
The set comes with 22 Icons - 256 x 256 Vector Based - 100% Free. Courtesy of dezinerfolio.com
[ Zip Download]
AQUA GLOSS VECTOR ICON SET:
High Quality and Rich Colours - Set of 32 Icons - 128 x 128 Transparent PNG - PSD (layered) included in the download. Courtesy of dezinerfolio.com
[ Zip Download]
ON STAGE VECTOR ICON SET:
100% Vector Shape Based - Layered PSDs - 128 x 128 PNG included - 100% FREE - use them anywhere. Courtesy of dezinerfolio.com
[ Zip Download]
DINGBAT FONT IMAGE SET:
[SPORT] [ANIMALS] [MUSIC] [VARIOUS] [SHAPES]
A collection of PC & Mac fonts that us conventional images instead of letters. Install these in your fonts folder then try them out in your favourite image editor. Courtesy of dafont.com
BRIGHT! A FREE ICON SET:
This 148-icon set contains all crisp-shaped icons that are designed for wide use in web applications, multimedia and software.Courtesy of iconeden.com
FUNCTION ICON SET:
128 Social media icons and much more. Courtesy of wefunction.com
[ Zip Download ]
WEB APPLICATION ICON SET:
20 icons designed specially for web applications (e.g. Charts, Profile, Search, Add, Delete, Email, Print, Warning and etc.., PNG format. Courtesy of webappers.com
[ Zip Download ]
| |
