{"id":2829,"date":"2008-08-05T22:45:12","date_gmt":"2008-08-06T03:45:12","guid":{"rendered":"http:\/\/magic1host.com\/blog\/2008\/08\/05\/4-easy-steps-to-create-web-graphics\/"},"modified":"2008-08-05T22:45:12","modified_gmt":"2008-08-06T03:45:12","slug":"4-easy-steps-to-create-web-graphics","status":"publish","type":"post","link":"https:\/\/magic1host.com\/blog\/?p=2829","title":{"rendered":"4 Easy Steps To Create Web Graphics"},"content":{"rendered":"
by Lucas Heijn<\/div>\n

Sometimes the most difficult part is knowing where to start. Have you ever had someone show you just how to do some something. They go click, click, and click – Done! And you’re none the wiser; You see everything is easy once you know how. That’s my purpose here. It is to help you see it as easy. So let’s look at these four steps.<\/p>\n

Step 1. Begin<\/p>\n

Go to “File” and click “New”. You now need to specify the size of your graphic. Normally you would have determined this in advance as you must first have a purpose for the graphic. Ours is a header graphic. Headers on a sales page are usually around 700 pixels by 120 pixels. So we can choose that as our size for the graphic.<\/p>\n

Step 2. The Background.<\/p>\n

There are 3 options. The background can be a solid color, a gradient, or a picture.<\/p>\n

If we choose a solid color we need to specify what color we want. We can do this on the floating toolbox, usually on the left-hand side of the work area. You will see 2 color boxes one over the other. Click on the top box and a color chooser comes up. Choose your color. Now click on the bucket tool. If you don’t see a bucket tool move your mouse over the tools until you find the gradient tool. Right click on the gradient tool and you will see two options, gradient or bucket.<\/p>\n

Having chosen the color, move your mouse over the new graphic. Your mouse pointer turns into a bucket and click. The color you chose in the tool box is now your background color.<\/p>\n

To fill this with a gradient, change the bucket toll into the gradient tool. Once again you need to choose a color. This time you will need to choose 2 colors. The top square is your starting color and the bottom square is the finish color of the gradient.<\/p>\n

On the top bar of the work area you now have a choice of different looking gradients. You will need to experiment with this to get the effect you want. To make the gradient, click and hold the mouse where you want to start and drag it to where you want it to finish.<\/p>\n

Importing a picture into your graphic as a background is easy. All you need to do is open a file with the picture you want to use. Make sure that the picture is larger or equal in size to the graphic you are creating. With your mouse just drag and drop the picture into your new graphic. Now just move it around to where you want it. That’s it.<\/p>\n

This works with JPEG Files but does not work with Gif files.<\/p>\n

Third Step: Working With Layers<\/p>\n

In Photoshop you work with layers. Each time you add something new you create a new layer. On the right-hand side of your work area you will see “Layers”. When you open this you will see all the layers. You can click on any of these layers and make them the active layer and the edit that layer.<\/p>\n

An image can be imported in the same way the background was imported. Just drag and drop it into the new graphic. When you do this you will notice that there is also some unwanted background with the image. This can be removed with the eraser tool.<\/p>\n

If the background is mostly one color use the “Magic Eraser”. You can choose this by right clicking on the eraser and choosing it. After choosing “Magic Eraser” move it over the section you want to remove. Click the mouse and you will see the background disappear. After removing the background and while it is still the active layer you can move this layer to where you need it.<\/p>\n

Fourth Step: Text<\/p>\n

In Photoshop your text is also a layer. Each time you insert new text you create a new layer. You are able to move the text around as you can any other layer.<\/p>\n

In the left hand tool box there is the text tool “T”. as in any word processor program fonts, styles and size can be chosen in the bar above the work area.<\/p>\n

Now that your text is in place it can be enhanced and made to stand out. Make sure the text you want to work with is the active layer. On the top bar of the work area is “Layer”. Click it and choose “Layer Style”. This will open up numerous options. To get an idea of what each of these does just play and experiment with it. As you choose an option it will instantly be seen before you commit it.<\/p>\n

There you are you have finished a simple but professional graphic you could use in a web site.<\/p>\n

You will need to save the graphic in Photoshop format so that you can always edit it without having to start from scratch again. If you want to save it for a web page you can do so by going to “File” from the drop-down box choose “Save For Web And Devices” this will produce a smaller file suitable for a web page.<\/p>\n

\n
About the Author:<\/div>\n
See how easy it is to create web pictures with Photoshop Action Scripts<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Sometimes the most difficult part is knowing where to start. Have you ever had someone show you just how to do some something. They go click, click, and click – Done! And you’re none the wiser; You see everything is easy once you know how. That’s my purpose here. It is to help you see it as easy. So let’s look at these four steps.<\/p>\n","protected":false},"author":81,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[112],"class_list":["post-2829","post","type-post","status-publish","format-standard","hentry","category-web","tag-web"],"_links":{"self":[{"href":"https:\/\/magic1host.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magic1host.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/magic1host.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/magic1host.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/magic1host.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2829"}],"version-history":[{"count":0,"href":"https:\/\/magic1host.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2829\/revisions"}],"wp:attachment":[{"href":"https:\/\/magic1host.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/magic1host.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/magic1host.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}