IPB

Welcome Guest ( Log In | Register )


Welcome Guest, Register to Remove this Message!
 
Reply to this topicStart new topic
> Strips & Bar
Joe
post Mar 21 2004, 07:03 PM
Post #1


* legend *
Group Icon

Group: Moderators
Posts: 5165
Joined: 31-January 04
From: The Valleys
Member No.: 8



A second part to adding something extra to your image, this will show you how to add that little bit more.

To start, create a new image with the dimensions 4x8 pixels (width - 4px x height - 8px) with a transparant background

user posted image

Zoom in as far as it will go (1600%) and select the pencil tool. Make the brush size 1 (smallest size) and a good colour to use is white but you can use whatever you want. Now on your image draw a strip down the middle of the image, make sure you dont touch the edges, like the example shown below.

user posted image

Click on edit > define pattern, you will get a dialogue box asking for a name. Give your pattern a meaningful name, such as strip (as I did).

user posted image

Open your image that you want to give this effect to and then create a new layer, call it 'strips' or something similar (meaningful preferably).

user posted image

Take the rectangular marquee tool and then make a selection on your page, make the selction like I have done, 4 pixels wide and vertically all the way down.

user posted image

Click on edit > fill or use the keyboard shortcut CTRL+backspace to open up the fill dialogue box, from the drop down list select pattern and then select our previously saved pattern (which hopefully you gave a meaningful name to).

user posted image

Once you have clicked on OK, press CTRL+D to deselect and you will see that you have a nice patterned strip down your image, but were not going to stop here.

user posted image


--------------------
[http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio.

Read my Weblog.
Go to the top of the page
 
+Quote Post
Joe
post Mar 21 2004, 07:04 PM
Post #2


* legend *
Group Icon

Group: Moderators
Posts: 5165
Joined: 31-January 04
From: The Valleys
Member No.: 8



Make a similar selection about 50 pixels away from our first strip and make the selection fill the screen vertically but this time make it 8 pixels wide.

user posted image

Follow the previous instructions to add our pattern to this selection, but this time instead of just one line with our patterned strip we will have two.

user posted image

Nope, were not going to leave it there either, create a new layer and call this one 'bar' or something along those lines. Now make a selection, this one must be inside of each of the sets of strips, like the example.

user posted image

Go to your original image and select a common colour that is used on that image, red being one of the most common colours in my image, use the eyedropper tool if you wish to select a colour. Fill your still selected bar with your chosen colour.

user posted image

It's a good tip to move the strips layer over the top over the bar layer at this point.

user posted image

Now, with the bar layer selected change the fill (layers box) to 50% and the opacity to 70%.

user posted image

Change the opacity on the strips layer to 80% and now you will see your image looks quite a bit better, by playing with this effect and changing certain things you will be able to add this effect to many images to make them look that little bit better.

user posted image


By Joseph Skidmore


--------------------
[http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio.

Read my Weblog.
Go to the top of the page
 
+Quote Post
bassrek
post Mar 23 2004, 12:58 PM
Post #3


grace
Group Icon

Group: Moderators
Posts: 3337
Joined: 2-February 04
From: Katy, TX
Member No.: 11



Another top-notch tutorial, joe. After I get my site back up I'll have to give credit to you and josh for digital inspiration smile.gif


--------------------
Go to the top of the page
 
+Quote Post
Joe
post Mar 23 2004, 01:17 PM
Post #4


* legend *
Group Icon

Group: Moderators
Posts: 5165
Joined: 31-January 04
From: The Valleys
Member No.: 8



thanks Bassrek, glad ya liked it biggrin.gif

i would make another one but theres nothing else i can make laugh.gif


--------------------
[http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio.

Read my Weblog.
Go to the top of the page
 
+Quote Post
Josh
post Mar 23 2004, 05:25 PM
Post #5


Facetious
*******

Group: Members
Posts: 2402
Joined: 3-February 04
From: NC
Member No.: 12



Yes, very good joe.

I think I'm gonna make a tutorial kinda like this one but it uses image ready also.


--------------------
Go to the top of the page
 
+Quote Post
Joe
post Mar 23 2004, 07:18 PM
Post #6


* legend *
Group Icon

Group: Moderators
Posts: 5165
Joined: 31-January 04
From: The Valleys
Member No.: 8



cool, look forward to seeing it


--------------------
[http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio.

Read my Weblog.
Go to the top of the page
 
+Quote Post
1000lks
post Feb 2 2008, 02:10 AM
Post #7


Newbie
*

Group: Members
Posts: 5
Joined: 29-January 08
Member No.: 11615



QUOTE(bassrek @ Mar 23 2004, 12:58 PM) *
Another top-notch tutorial, joe. After I get my site back up I'll have to give credit to you and josh for digital inspiration smile.gif

thanks for the information
i like it


--------------------
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

 



Lo-Fi Version
Euribor
Reviews
Time is now: 9th February 2010 - 12:13 PM