Grunge Styled Site Splash
MMORG ZONE :: Design and 3D Graphic :: Photoshop :: Guides
Page 1 of 1
Grunge Styled Site Splash
1
Start by opening a new photoshop document approximately 700px X 500px. When finished, make the [color:6597=orange ! important][color:6597=orange ! important]background [color:6597=orange ! important]color #232323.
2
When finished, create a new folder/set labeled "background" and create
a new layer inside of it. Both of these creation items are located on
the bottom of the layer window.
3
Next, on this new layer, we are going to create some large diagonal
lines. If you don't know how to create diagonal lines you may want to
refer to http://www.13dots.com/forum/index.php?showtopic=11852.
I used 50px wide lines colored #3F3F3F in another photoshop file,
flattened the file (Layer>Flatten Image) and set the image as a
pattern (Edit>Set Pattern). When done with this, go back to your
main file, and select (using the rectangle marquee tool) about a
3/5th's portion of your image (as shown below) and, fill it with your
newly made diagonal background.
4
Leaving the selection active, stroke a selection (center) on a new layer (Edit>Stroke) colored #5D5D5D.
5
We are going to add another border to sharpen up the border a bit. So
using the current selection, contract (Select>Modify>Contract) it
1px. Now stroke the selection using #565656. You should have something
like below.
6
Now we need to get rid of the left and right borders we just created,
leaving the top and bottom intact. Contract the selection 1px again.
Move the selection left 2px, press Delete, move the selection right
4px, press delete. Your left and right strokes/borders should be gone
now.
7
Still keeping the selection active, we are going to add a little bit of light to our [color:6597=orange ! important][color:6597=orange ! important]splash.
Create a new layer. Using the Gradient Tool, pull a white gradient from
the bottom of the selection to the top. Then set the Layer blend mode
to "Soft Light".
8
Create a another new layer. Fill the layer with white using the Paint
Bucket Tool. Then go to Add Noise (Filter>Noise>Add Noise). Use
the following settings: (Amount:48.84; Distribution:Uniform;
Monochromatic). Then set the layer's opacity to 49% & it's blend
mode to overlay.
9
Duplicate the last layer, and set it's opacity to 31%. Also, make sure
that you apply Noise again to this layer so that it doesn't directly
overlay the last layer.
10
Now to add grunge. We choose this free stock http://www.sxc.hu/photo/919435;
sxc is a free stock site, all you are required to do is sign up. Copy
the image from the website. Then, within the selection (I hope you
still have it selected!), Paste (Edit>Paste Into) the image into the
selection. Now Transform (Ctrl+T) the image as small as you can without
making it smaller than the image itself. Finally, change the layer
blend mode to Darken. This is pretty much all there is to your
background grunge section, now for the foreground.
11
Now we will create a star to stand off of the background. But first,
create a new folder labeled "foreground" & create a new layer.
Selecting the Polygon tool, create a star about the size of the one
below. Using the transform tool, turn the star while holding shift to
an about a 30 degree angle; you can choose what angle you'd wish
however. Be sure to draw vector lines/paths & not a shape. When
done, go to the path panel, select the star path, and turn it into a
selection (on the bottom of the path panel). Now, fill the selection
with the color #9AFB00. Set the layer's opacity to 47%.
12
Now to make the star more interesting. Create a new layer. First set
your forground color to #9AFB00 and background to #639D07. Now, using
the same selection, stroke a gradient from the bottom left to the top
right of the star. Set the layer blending mode to Multiply.
13
Now, apply the following settings to the this layer.
14
Closing out the foregroud, we are going to add two borders. Using the selection, stroke on a new layer the color #3CD10A.
15
For the second border, contract the selection 1px, and stroke using the color #DFF369. Now set the layer's opacity to 71%.
16
Closing in, create a new layer set named "font". This will be where we
add our name/title. You can add anything you'd like but we used the
words "Vega" using the Century Gothic [color:6597=orange ! important][color:6597=orange ! important]font
(using the Horizontal Type Tool). Under that, we applied another font,
Arial (11px), saying "designs". This is stretched two layers. However,
this can be done any way you like.
Also with the star, I have tried variations myself, without using
Multiply on the gradient star layer and got this, either variations may
look good. It's to your choosing. Thanks for reading!
Start by opening a new photoshop document approximately 700px X 500px. When finished, make the [color:6597=orange ! important][color:6597=orange ! important]background [color:6597=orange ! important]color #232323.
2
When finished, create a new folder/set labeled "background" and create
a new layer inside of it. Both of these creation items are located on
the bottom of the layer window.
3
Next, on this new layer, we are going to create some large diagonal
lines. If you don't know how to create diagonal lines you may want to
refer to http://www.13dots.com/forum/index.php?showtopic=11852.
I used 50px wide lines colored #3F3F3F in another photoshop file,
flattened the file (Layer>Flatten Image) and set the image as a
pattern (Edit>Set Pattern). When done with this, go back to your
main file, and select (using the rectangle marquee tool) about a
3/5th's portion of your image (as shown below) and, fill it with your
newly made diagonal background.
4
Leaving the selection active, stroke a selection (center) on a new layer (Edit>Stroke) colored #5D5D5D.
5
We are going to add another border to sharpen up the border a bit. So
using the current selection, contract (Select>Modify>Contract) it
1px. Now stroke the selection using #565656. You should have something
like below.
6
Now we need to get rid of the left and right borders we just created,
leaving the top and bottom intact. Contract the selection 1px again.
Move the selection left 2px, press Delete, move the selection right
4px, press delete. Your left and right strokes/borders should be gone
now.
7
Still keeping the selection active, we are going to add a little bit of light to our [color:6597=orange ! important][color:6597=orange ! important]splash.
Create a new layer. Using the Gradient Tool, pull a white gradient from
the bottom of the selection to the top. Then set the Layer blend mode
to "Soft Light".
8
Create a another new layer. Fill the layer with white using the Paint
Bucket Tool. Then go to Add Noise (Filter>Noise>Add Noise). Use
the following settings: (Amount:48.84; Distribution:Uniform;
Monochromatic). Then set the layer's opacity to 49% & it's blend
mode to overlay.
9
Duplicate the last layer, and set it's opacity to 31%. Also, make sure
that you apply Noise again to this layer so that it doesn't directly
overlay the last layer.
10
Now to add grunge. We choose this free stock http://www.sxc.hu/photo/919435;
sxc is a free stock site, all you are required to do is sign up. Copy
the image from the website. Then, within the selection (I hope you
still have it selected!), Paste (Edit>Paste Into) the image into the
selection. Now Transform (Ctrl+T) the image as small as you can without
making it smaller than the image itself. Finally, change the layer
blend mode to Darken. This is pretty much all there is to your
background grunge section, now for the foreground.
11
Now we will create a star to stand off of the background. But first,
create a new folder labeled "foreground" & create a new layer.
Selecting the Polygon tool, create a star about the size of the one
below. Using the transform tool, turn the star while holding shift to
an about a 30 degree angle; you can choose what angle you'd wish
however. Be sure to draw vector lines/paths & not a shape. When
done, go to the path panel, select the star path, and turn it into a
selection (on the bottom of the path panel). Now, fill the selection
with the color #9AFB00. Set the layer's opacity to 47%.
12
Now to make the star more interesting. Create a new layer. First set
your forground color to #9AFB00 and background to #639D07. Now, using
the same selection, stroke a gradient from the bottom left to the top
right of the star. Set the layer blending mode to Multiply.
13
Now, apply the following settings to the this layer.
14
Closing out the foregroud, we are going to add two borders. Using the selection, stroke on a new layer the color #3CD10A.
15
For the second border, contract the selection 1px, and stroke using the color #DFF369. Now set the layer's opacity to 71%.
16
Closing in, create a new layer set named "font". This will be where we
add our name/title. You can add anything you'd like but we used the
words "Vega" using the Century Gothic [color:6597=orange ! important][color:6597=orange ! important]font
(using the Horizontal Type Tool). Under that, we applied another font,
Arial (11px), saying "designs". This is stretched two layers. However,
this can be done any way you like.
Also with the star, I have tried variations myself, without using
Multiply on the gradient star layer and got this, either variations may
look good. It's to your choosing. Thanks for reading!
- Favourite Game : MuOnline
Registration date : 1969-12-31
Similar topics
» [Sig.Tutorial]Ripple & Grunge
» Cum pui AutoUnBan pe site-ul tau.
» Asa faci SIte cu InfernoWEB
» Asa faci site cu RENSLTWeb
» Asa faci site cu CrystalWeb !
» Cum pui AutoUnBan pe site-ul tau.
» Asa faci SIte cu InfernoWEB
» Asa faci site cu RENSLTWeb
» Asa faci site cu CrystalWeb !
MMORG ZONE :: Design and 3D Graphic :: Photoshop :: Guides
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|