Archives for the 'Photoshop' Category

Adobe CS2/CS3 Photoshop Brushes

Hello all, I recently got a few e-mails asking me how I made my banner on Thinkblogger.

The program that was used was Adobe Photoshop CS2 and I was able to do so due to a number of different brushes that I downloaded.

Alot of these brushes are free, others have terms of use which you must follow.

On to the Brushes!

You can find these brushes anywhere really. but the main 2 websites that I got them from are Brusheezy and Deviantart (Brush Section). You would also be able to find some pretty good sites if you google “Photoshop CS2 Grunge Brushes.”

However, Brusheezy and Deviantart both have a great selection which was more than sufficient for myself.

Some of the brushes on Deviantart that I liked and toyed with (and might still use for the next design attempt of Thinkblogger):

1. Urban Designs Vector Brushes by RedHeadStock
2. Ripe Grunge Extreme Pack by RazorICE
3. Vector Pack Brush Set by Solenero.

Look around, see what you can find that you enjoy! You would be surprised on how many quality brushes are out there that you can use.

Any Final Notes?

If you have any brushes that you would like to add to this list that you think are good or that you used in your designs. Feel free to comment, I might just add them!

28 March 2008 | Photoshop | 13 Comments

Colors of Web 2.0

Hiya. Its been a while, hasn’t it. It has been quite a bit since I updated the photoshop section.

What I wanted to quickly do is just demonstrate some of the web 2.0 colors that are available to you to work with. Whether making a website or a banner, these colors and themes can help you decide how to continue.

These colors can be very powerful if you know how to use them. I hope you enjoy my slaving over html tables and blank cells just to create this. So …. Enjoy.

5 March 2008 | Photoshop | 5 Comments

Some great Web 2.0 Resources for you!

Those of you who are into blogging, I ask this to you: Have you got your fix of web 2.0 lately? Since I started working on websites, I have been entranced by the idea behind web 2.0. The term itself, coined so long ago, has grown exponentially.

Web 2.0: Something you should Invest in

In the design-stage of a website, web 2.0 is, in itself, something of a mystery. However, you know its good. It sounds good too. Without arguing over semantics, I have crossed through multiple internet sources to provide you with some web 2.0 resources. Whether it be banner tutorials, badges (and tutorials), design concepts, photoshop tutorials, sleek buttons, and so forth and so on.

Webmaster? Look Here!

Whether you like the style personally or not, guess what? Web 2.0 is coined “Web 2.0″ for a reason. The general public likes it better. So whether or not you may agree (or disagree) with simplistic yet ’sleek’ banners/badges on your site, generally it is something you should not only look into but try to work with. Of course, there is a list of exceptions, however Web 2.0 websites always stand out because they are not only unique, but rather stylish.

Web 2.0 Resources Just For you:

• Photoshop Web 2.0 Banner Tutorial - This banner tutorial is proudly hosted and created by Thinkblogger.org. Personally, this web 2.0 banner tutorial turned out quite nicely. I am getting a bit more comfortable writing tutorials and playing around with web 2.0 designs. More tutorials like these (by thinkblogger) will come shortly when I have a free hour or so to write one up.
• Photoshop web 2.0 Badge Tutorial - This badge tutorial is proudly hosted and created by ThinkBlogger.org. Though this is ThinkBlogger’s first web 2.0 tutorial, there are some things (even now) that I would do differently now that I am more comfortable with CS2. More badge turorials will definitely show up on ThinkBlogger.
• Web 2.0 Badges - This site is includes a VERY nice collection of web 2.0 badges (blank) for you to work with. It also comes with a very unique online badge generator. Nice resource for anyone who does not know how to create web 2.0 badges yet in CS2.
• Web 2.0 RSS Button Tutorial - This tutorial goes over how to make a style of stylish RSS buttons (or any style of button really)
• Web 2.0 Logo Creator - If you want to quickly do a banner/logo in web 2.0 but know nothing about CS2, do not have the time to learn (or do not have the program), then this is for you.
• Web 2.0 Blog Comment Bubbles - These comment bubbles are stylish, web 2.0, and rounded. What more could you want?
• Popular Web 2.0 Color Schemes - Ever wanted to know what web 2.0 colors are in? Well, this website has a few which are quite useful.
• Another great Web 2.0 Badge Tutorial - This tutorial is very straight forward and it looks pretty awesome.
• More Web 2.0 Color Palettes - Though they may not look that good as blocks of colors, with the right style of website, those colors can become gold! Many of those greens are plastered all over Thinkblogger, too

Web 2.0? So what?

Well, it is just that. It’s 2.0. Not 1.0. I live by these types of colors and these types of design. I am making some nice money off them. Even from my proxy sites, I make my designs web 2.0. Why? So people remember them better. They are more unique and friendly on the eyes.

Conclusion:

Though it has been around for a while, I decided to find a few resources which can help you put your foot in the door. Some of those banner tutorials are pretty good, I must admit. It just means that in the future, I will have a goal to beat and make something that looks better.

I hope everyone enjoyed. I have a few traffic gaining entries coming up within the next few days which you might enjoy!

20 January 2008 | Photoshop | 4 Comments

How to create an awesome web 2.0 Banner (Photoshop CS2/CS3)

Lets say you want to create a banner. Do you have a style in mind? Maybe, a nice sleek web 2.0 banner? Well, this will give you a bit of an idea on how to create it. I will use my Thinkblogger banner at the top as an example.

Style: Stripey Web 2.0 Banner.

Tutorial: How to create a sleek web 2.0 banner in photoshop CS2!

What is required for this experiment/web 2.0 banner:

• Photoshop CS2/CS3 (or another program with similiar design abilities)
• Have the program loaded up prior to downloading the link.
• A nice sleek diagonal background. (this one is a pain, which is why I provided you with the link: here).
• Some creativity on your part.

What is involved in this tutorial:

• 1st Step: To download the pattern and successfully place it into your Adobe CS2/CS3 Pattern folder.
• 2nd Step: To actually draw the banner, following the steps below!

Part 1: Placing the Pattern into your Adobe Patterns List:

Instead of giving you an image to work with, to import to Adobe, I have given you the actual pattern (.pat) file for your web 2.0 banner. Depending on your browser, instead of saving it onto the disk, you should be able to just click “Open” in either Internet Explorer or Firefox and it should automatically load the pattern into Adobe (while loading up Adobe Photoshop in the process, aswell - might be easier to have Adobe opened up and minimized before you do this). If I am correct, the new pattern is now loaded into your Adobe Photoshop CS2.

If the above method does not work, then I suggest finding your Pattern Directory (default on C would be: C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Patterns), and save it into there)

Part 2: Designing/Creating the actual Banner (The Fun Part)

Step 1: Create the image framework.

• Create an image that is 470 x 84 (that is what I am currently using for this example). Fill the image with whatever color you wish.
• (For the demonstration, I used #00529e - You will need to remember your fill color for later if you wish to use your stripe with a gradient effect).

Step 2: Adding the Striped Background (this of course is completely optional).

• When selecting the ‘paint bucket’ tool, there should be a new menu along the top that appears (a line below the file/edit/image menu).
• The new menu should have a dropdown box which, by default, should have ‘Foreground’ in it. The menu/dropdown is shown below:

• When you click it, you have a choice of two options, foreground or pattern. Select pattern and you will find the new diagonally striped pattern for you to use.
• Do not apply yet. First, create a new layer. On the side bar, it should show that you now have 2 layers. Select the second layer, then click anywhere on the picture to create your stripes.

Step 3: Adding Style to the stripe itself (Also Optional)

• If you do not wish to add a gradient, the generally, the opacity of the stripe layer should be under 20% to give it a nice slick feel. I usually set mine anywhere between 8-20% (depending on what color I use on the background). Then skip the rest of Step 3.
• However, If you wish to add a gradiant, then select the stripe layer from the sidebar, then select the “Layer” menu on the top of the page. A drop menu will appear, select “Layer Style”, and a side-expansion menu will appear: select “Blending Options”.
• Checkmark the box beside “Gradient Overlay”. If you see that your stripes have changed from a solid color to black -> white (or whatever your default is set to), then good job. Now, select the words, ‘Gradient Overlay” to change some of the options.
• Click on the gradient viewer bar itself. You will have to change the colors to both of those. If you used the #00529e color for your background, then you already have your first color on the one side. The second color is up to you. But for the demonstration, I have used #5ebdff. The outcome is shown below:

• No Need to adjust your eyes. I know, its painful. Thats why you should automatically set layer 2’s (stripe layer) opacity below 50%. To give it a softer “I dont want to hurt your eyes” type of feel. For the demonstration, I set the stripe layer to 18% opacity. The “new” image is below:

Step 4: The Text

• Here you can put whatever you like. Its YOUR banner. For this demonstration, I will put up … hmm .. thats a tough one … how about … “ThinkBlogger”.
• Set your font color to a medium-dark grey (I usually like to use #545454). Set your font size to 72px (or whatever you feel comfortable with).
• Use whatever font you wish, but you should try to find some free fonts that are bulky and bubbly/rounded. This of course depends on the style of what your trying to do. I used the same one that I did for ThinkBlogger banner, it is titled “Billo” font. Center the text in the middle of the screen and you are pretty much done this easy step.

Step 5a: Outline:

• Select your text layer on the sidebar then go to your blending options (refer to the bolded section in step 3). Click the checkmark beside the “Stroke” field. It should automatically outline your text in bright red.
• Select the “Stroke” word, and a new menu should appear. All you really have to do here is click on the red square (or whatever your default is), and change the color to white. This is shown below:

Step 5b: Gradient:

• Select your text layer on the sidebar then go to your blending options (refer to the bolded section in step 3). Click the checkmark beside the “Gradient Overlay” field. It should appear black to white.
• Your half way done already. You should keep the black on the one end (or something pretty close to it), then on the other side select a light-ish grey that will work well with your image. I used: #a7a7a7. Play around with it, as it will impact how people perceive your banner :). The end result is shown here:

Step 5c: Outer Glow

• I like to do this with a lot of my banners. Select the sidebar text layer and then go to your blending options (refer to the bolded section in step 3). Click the checkmark beside the “Outer Glow” field. Personally, you shouldn’t see much of a difference at this point upon enabling it.
• Select the text field “Outer Glow”. A new screen should appear which deals with Outer Glow features. You should see a bright-ish yellow box, click it (this should open up a color picker). Here you can be as creative as you want really, though for this example I will use a blue (as the background is blue), but will bring it as close to white as I think is necessary. (I chose #8ddbff for mine).
• Change the “Size” field to 15. (Play around all you like)
• Change the “Range” field to 40. (Play around all you like)
• Your new banner should look like this (in style, of course):
  

Step 6: White Oval Layer

• Create a new layer (In total, you should have 3 layers + your text layer at this point if you have not done anything too creative). Select your new layer.
• Right-Click the Rectangle Marquee tool on the side and select “Elliptical Marquee Tool”
  
• Select a good portion of the image, making sure you cover no more than 50-60% of your text. At this point, if you have not done so, then make sure that you select your paint bucket tool back to “foreground”, and not “pattern”. Take the paint bucket tool and fill whats in the elliptical marquee with white! (important, even though it may look ugly at this point).
• So you know what you are doing in the next step, set opacity to about 70%. It is important that you do NOT unselect the area you have selected with the Elliptical Marquee tool at this point.
• The following steps are important. (seeing as I will not be able to use screenshots to show you what I have selected). On the sidebar (in the layers ‘widget’), select the text layer. Using the “Magic Wand Tool”, press/hold alt.
• You will see a little minus (-) beside the tool. Go over to your image and select the striped background above the text. What this ’should’ do, if the steps have been followed, is select only the insides of the text on “ThinkBlogger”, or whatever you have chosen.
• Immediately following this (while you still have your selected area sacred), click on the new “white” layer that was created a few steps back.
• go to “Select” at the top menu (File, Edit, Image…… etc) and click it. A dropdown menu will appear, then find ‘Inverse’ and select it.
• What this should do, is inverse your selected area so everything within the white is selected, but not the text. Press delete. What you should see is the inside of the text still whitened while all the other mess, now gone.
• Select the opacity of the white layer, to about 25%. This can be done on the sidebar. The end product should look something similiar to this (..if you managed to make sense of all my teeth-grinding steps):
  

There you have it! A nice clean tutorial to help you get started There you have it! A nice clean tutorial to help you get started

25 December 2007 | Photoshop | 36 Comments

• Earlier Posts