Hello, i have this link >>>http://www.joomla.org in the top corenr it has a banner that i would like to recreate for my site and basically would like to know how to do this in photoshop and then add it to the site?
thanks
0
create corner banner
Started by donkeymusic, Jun 25 2007 08:54 AM
10 replies to this topic
#1
-
- Members
-
- 495 posts
Jedi In Training
- Gender:Male
- Location:Warrington, UK
Posted 25 June 2007 - 08:54 AM
#2
-
- Members
-
- 871 posts
P2L Jedi
- Gender:Male
- Location:UpNorth
Posted 25 June 2007 - 06:57 PM
Doing it in PS is easy if you have the logo, just make a rectangle of appropriate size and add a linear gradient to it from top to bottom with tow colors o choice (jomla is using a lighter and a darker shade of blue) then on a new layer add the logo and text and if needed more text on a 3rd layer. Then link the layers together or merge them and press ctrl-t to bring up the transformation wizard. Hold shift and rotate the banner 45 degrees. cut of the corners at the top to bottom with a inverted rectangular marquee and you are set.
I havnt ot a clue on how to make it corner sticky in your browser though.
I havnt ot a clue on how to make it corner sticky in your browser though.
#3
-
- Members
-
- 495 posts
Jedi In Training
- Gender:Male
- Location:Warrington, UK
Posted 26 June 2007 - 04:42 AM
Dance, on Jun 26 2007, 12:57 AM, said:
Doing it in PS is easy if you have the logo, just make a rectangle of appropriate size and add a linear gradient to it from top to bottom with tow colors o choice (jomla is using a lighter and a darker shade of blue) then on a new layer add the logo and text and if needed more text on a 3rd layer. Then link the layers together or merge them and press ctrl-t to bring up the transformation wizard. Hold shift and rotate the banner 45 degrees. cut of the corners at the top to bottom with a inverted rectangular marquee and you are set.
I havnt ot a clue on how to make it corner sticky in your browser though.
I havnt ot a clue on how to make it corner sticky in your browser though.
ah right never thought of doing it that way, will give that w hirl, just nee to suss out how to get it on the webpage, thanks
#4
-
- Members
-
- 871 posts
P2L Jedi
- Gender:Male
- Location:UpNorth
Posted 26 June 2007 - 01:38 PM
Ask a admin to move this to the web design area, i do bet you'd have better luck asking there as it isn't PS related.
#5
-
- Members
-
- 824 posts
P2L Jedi
- Gender:Male
- Location:USA
- Interests:Computers, Technology, Internet, Graphic/Web Design, Music, Soccer
Posted 26 June 2007 - 04:11 PM
I believe you can use CSS to absolutely position the image wherever you'd like on the page.
#6
-
- Members
-
- 495 posts
Jedi In Training
- Gender:Male
- Location:Warrington, UK
Posted 27 June 2007 - 04:40 AM
Jacorre, on Jun 26 2007, 10:11 PM, said:
I believe you can use CSS to absolutely position the image wherever you'd like on the page.
thanks
#7 _*Creative Insanity_*
-
- Guests
Posted 27 June 2007 - 05:35 AM
You cannot use that logo exactly. Since it belongs to joomla. I would imagine if you did at the very least you would get flamed out of excistance. At worst have joomla's lawyers on your back.
You would need to change it somehow.
You would need to change it somehow.
#8
-
- Members
-
- 495 posts
Jedi In Training
- Gender:Male
- Location:Warrington, UK
Posted 27 June 2007 - 05:41 AM
Creative Insanity, on Jun 27 2007, 11:35 AM, said:
You cannot use that logo exactly. Since it belongs to joomla. I would imagine if you did at the very least you would get flamed out of excistance. At worst have joomla's lawyers on your back.
You would need to change it somehow.
You would need to change it somehow.
i was not planning on using that image, was going to creat my own banner, just need to know how to position it
#9 _*Creative Insanity_*
-
- Guests
Posted 27 June 2007 - 05:54 AM
Oh ok.. I thought you said you wanted to recreate it.
Easy.
The black bar is a background image and the logo is an image on top. Sorta like this:
Easy.
The black bar is a background image and the logo is an image on top. Sorta like this:
#header{
background-image:url(images/black_back.png);}
<div id="header"><img src="logo.png" alt="logo" /></div>
#10
-
- Members
-
- 495 posts
Jedi In Training
- Gender:Male
- Location:Warrington, UK
Posted 27 June 2007 - 06:03 AM
Creative Insanity, on Jun 27 2007, 11:54 AM, said:
Oh ok.. I thought you said you wanted to recreate it.
Easy.
The black bar is a background image and the logo is an image on top. Sorta like this:
Easy.
The black bar is a background image and the logo is an image on top. Sorta like this:
#header{
background-image:url(images/black_back.png);}
<div id="header"><img src="logo.png" alt="logo" /></div>well sort of meant recreate, want to o my own in that style, so just the bannerin the corner i want to position.
#11
-
- Members
-
- 824 posts
P2L Jedi
- Gender:Male
- Location:USA
- Interests:Computers, Technology, Internet, Graphic/Web Design, Music, Soccer
Posted 27 June 2007 - 08:56 AM
CSS:
HTML:
The above will absolutely position the logo div to the top right of the page.
body {
position: relative;
}
#logo {
background-image: url(path to image);
width: width of logo;
height: height of logo;
position: absolute;
top: 0;
right: 0;
}
HTML:
<body> <div id="logo"></div> </body>
The above will absolutely position the logo div to the top right of the page.
Edited by Jacorre, 27 June 2007 - 08:58 AM.
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
