Quantcast

Two-Tone Style Pictures

Get the WebProNews Newsletter:


[ Business]

This style of design is excellent for backgrounds and light accent type work. Make sure you use a fairly simple photograph for this technique, as you’re going to be converting it to two color.

1. Open your photograph.

2. Click File/Export Preview and select the GIF format. Click on the color number (should be 128 by default) and make the value 2, thereby reducing your image to two-color.

3. Your photograph should now only contain two regions. The actual photograph and the background. To make things easier, go ahead and make those two colors black and white by clicking on the colors from the palette box. Make the foreground white and the background black.

4. We want to take out the background so click on the Add color to transparency button and eye drop the background. Now you’re ready to export, so click export and select a directory.

5. Open the file you just exported. You should now have a white foreground type image on a transparent background.

6. Create a black rectangle that is the same size as your image and place it ‘behind’ your image. Select the rectangle and go to the Fill palette. Select the Grid 4 texture and make the opacity 100%. You should now have a pretty funky two tone photo.

Feel free to maniuplate the opacity on the texture, or click ‘Transparent’ and change background colors.

Pixelated Titles and Graphics
This is a design technique that has really taken hold of a lot of sites in the past year or so. It embraces the futuristic concept of the internet, while maintaining readability and class.

You’re going to need some sort of pixel font for this technique. If you don’t own a pixel font, I suggest you either track down Mini 7 or TenaCity, which are available at a very low cost. Or download BitCap for free.

1. Find the target size of the pixel font you’re using, for Mini 7, it could be 7 pixels or 10 pixels depending on which version you have. BitCap is 10 pixels.

2. If you’re creating a title graphic, it’s ok to make the font size bigger than the target size, just make sure you use multiples of the number. (e.g. BitCap at 20, 30, or 40 pixels)

3. Place the text on the canvas. It’s a good idea to keep colors to a minimum when designing in this style. Two or three colors would be ideal.

4. With your text in place, there are a couple of things you can do to make it look even more modern. Apply a one color drop shadow…

5. Go to the Effects palette. Go to Drop Shadow and Glow/Drop Shadow. In the options that follow, bump the Opacity up to 100%, set the Softness to 0% and the Distance to 2. Now choose a color that will match your existing text color.

Pixelated titles go great with Two-tone pictures, so feel free to mix and match!

We’re going to take a look at some more modern graphics techniques in the next issue of DesignNewz. So stick around for that!

iEntry provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.

Two-Tone Style Pictures
About Web Development Writer
iEntry provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests. WebProNews Writer


Top Rated White Papers and Resources
  • http://daygansuniverse.googlepages.com Daygan

    I really wish you had an example posted here so I could see right away what affect this method would have… as it is, i can only guess, and don’t want to take the time to read through the long explanation that doesn’t seem to tell me clearly what the result is going to be.. can you post an example?

  • Join for Access to Our Exclusive Web Tools
  • Sidebar Top
  • Sidebar Middle
  • Sign Up For The Free Newsletter
  • Sidebar Bottom