DigitalPhotoJob.com
Search WebCrawler
Navigation
| Photoshop Basics |
| Photoshop Effects |
| Photo Dynamics |
| Advertisement |
| Superimposing |
| Web Graphics |
| Examples |
Featured Equipment
Photoshop Web Graphics and Design
Note: This section uses Adobe Photoshop
for Picture Editing
Find all current special offers on Adobe products.
This type of picture editing relies heavily on filters and layers, a good web graphic can vary from a simple gathering of shapes to make a corporate logo to a baroque layer filled picture for a flashy webpage. Either way (if I haven't referred you enough) check out the basics and filters page to get the most of these tutorials and job skills. Graphics are the opening show to a webpage, that is what really attracts someone and gives them a sense of what they can obtain from your website. This is a highly looked for profession in the world of picture design and editing, because there are now an endless plethora of websites each needing a design scheme, and creator. This will not show you anything about HTML but if you already have some of those skills and need help getting creative with your graphics then this tutorial will truly help.
Jump to a Light Subject
-Gifs- -Shapes-
-Web Graphic Filters- -Pixel Backgrounds-
-Web Graphic Jobs- -Making a Website-
A general image of leaves can be used for multiple types of sites
This image is a grouping of leaves that and I just added FILTERS - SKETCH - STAMP and it gives it a drawing look perfect for a ton of sites. Now this can be used for a body, or for a head with the logo and navigation bar going over the graphic.
Here is another example:
A Niche Seattle site with a Graphic of the city itself
This time I show the application of the picture, this is a quick sketch of what the websites graphics may look like. This uses a seattle picture with the FILTER - SKETCH - HALFTONE PATTERN used to give it a stylized urban feel. The main seattle text is a mask and I used the rectangle shape tool for the navigation bar. The main difference from the first photoshop project of the leaves is that the cityscape shows more color and looks more defined with the standard red and blue colors. The leaves looks more flowing and obviously organic which is better for some sites that the latter picture wouldn't be.
Another way to make your webpages unique is to add a pixel background, or a small pixel design. By making a small unique design with a small number of pixels and then repeating the background results in a nice simple pattern. Open a document about 3 X 3 pixels and then use the pencil tool at 1 pixel width, now zoom into the work space until it is blown up as big as it can get. Zooming in makes it easier to draw the design you want, start drawing a your pixels and repeat them as a background and your done.
Selling products on a site is called affiliate marketing, it is a way to make money by selling products from companies like: Barns and Noble, Circuit City, and Ebay just to name a few. It takes a bit of reading and if your interested you need to buy the Affliate Handbook this is the greatest book! on the subject... we can't say enough good things about it.
Find all current special offers on Adobe products.
This type of picture editing relies heavily on filters and layers, a good web graphic can vary from a simple gathering of shapes to make a corporate logo to a baroque layer filled picture for a flashy webpage. Either way (if I haven't referred you enough) check out the basics and filters page to get the most of these tutorials and job skills. Graphics are the opening show to a webpage, that is what really attracts someone and gives them a sense of what they can obtain from your website. This is a highly looked for profession in the world of picture design and editing, because there are now an endless plethora of websites each needing a design scheme, and creator. This will not show you anything about HTML but if you already have some of those skills and need help getting creative with your graphics then this tutorial will truly help.
-Gifs- -Shapes-
-Web Graphic Filters- -Pixel Backgrounds-
-Web Graphic Jobs- -Making a Website-
Introduction to GIFS
Gifs are a image type that carry there name from the file type .gif like picture.gif, they make it so you are able to do transparencies. This is helpful in so many ways, mostly if you have a background in your website and you want to lay a picture over it that isn't a perfect square or rectangle. If you don't understand completely... don't worry you probably will, the only thing you need to know is that when you are saving a picture in photoshop, and it asks you what to save it as put it as a .gif if you need a transparency.Shape it up!
Using simple geometric shapes can be a good starter or brace for where your web graphics are going to go or what they are going to convey. Most websites have flowing bars and shapes on which more graphics might lay, giving it a sense of stability and making them appear solid and not floaty. If you are dealing with squares and rectangles there are two types of web graphics gradient and solid. You rarely can mix the two, it will usually cause the sight to clash. It is all about attracting people to your website with visuals so you need to think if you needs to be solid which would convey a more business approach, or gradient which can give off a sleeker more warm approach (depending on the colors). This isn't exact, that is just the general concept of them both, but they are things you need to think about.Web Graphic Filters
To stylize your website, if it is needed, you can add actual pictures to your website scheme. Taking simple pictures of cityscape, flowers, vines, or other imagery and adding it to your site can give it more of a mood and help fit its niche. These type of graphics are very common on the web with Clothing, music, gaming, furniture, specialty items and a ton of other niche sites. I will give you an example:A general image of leaves can be used for multiple types of sites
This image is a grouping of leaves that and I just added FILTERS - SKETCH - STAMP and it gives it a drawing look perfect for a ton of sites. Now this can be used for a body, or for a head with the logo and navigation bar going over the graphic.
Here is another example:
A Niche Seattle site with a Graphic of the city itself
This time I show the application of the picture, this is a quick sketch of what the websites graphics may look like. This uses a seattle picture with the FILTER - SKETCH - HALFTONE PATTERN used to give it a stylized urban feel. The main seattle text is a mask and I used the rectangle shape tool for the navigation bar. The main difference from the first photoshop project of the leaves is that the cityscape shows more color and looks more defined with the standard red and blue colors. The leaves looks more flowing and obviously organic which is better for some sites that the latter picture wouldn't be.
Pixel Background
Another way to make your webpages unique is to add a pixel background, or a small pixel design. By making a small unique design with a small number of pixels and then repeating the background results in a nice simple pattern. Open a document about 3 X 3 pixels and then use the pencil tool at 1 pixel width, now zoom into the work space until it is blown up as big as it can get. Zooming in makes it easier to draw the design you want, start drawing a your pixels and repeat them as a background and your done.
Web Design and Graphics for Job and Career skills
I think this is a great career decision that is very independent, meaning that you can be your own boss. With the right knowledge of things like CSS, HTML, and maybe Javascript and of course web graphic design then you can create your own website for whatever subject you want. Or you can even just buy a Webpage builder, which makes the code process even more simplified, this is great for starters. If you like the independent job atmosphere and have a pretty good knowledge of computers, then this is your career. No extra schooling is required for this particular job becuase anybody can learn these skills and there is no expensive equipment to get. After reading a couple books you might have all you need to get started, it is definitely something to look into.Do you want to Make a Website?
So you want to make a website? Well these days its much easier than you might think although a lot of people know web code like HTML, CSS and Javascript, there are programs that help you make a website without all the code. All you do is design, which makes it a ton easier for anybody just starting out. If you are asking "can I make money?" the answer is yes, this might take a little bit of knowledge but webpage profit making isn't some kind of underground pyramid scheme so its really not all that hard. Here are the steps:- Think of an idea, something that is original of course, it could be a service, informative or just something that would attract people to your website... like maybe your photography
- Create the website using HTML or a website building program
- Put the website on the internet using a host
- Either, Sell a product on your page or use pay per click ads to make a profit off the people viewing your site
Selling products on a site is called affiliate marketing, it is a way to make money by selling products from companies like: Barns and Noble, Circuit City, and Ebay just to name a few. It takes a bit of reading and if your interested you need to buy the Affliate Handbook this is the greatest book! on the subject... we can't say enough good things about it.