Joomla Templates Club 406,261 posts

[davib Friend davibJoin date: December 2005Posts: 81Downloads:0Uploads:3 Thanks: 7]

#120307

Any experts wanna try and give us a step by step instruction on how to make the header images so they work?

I can see there are 3 parts to it but dont seem to be able to do it…Im sure its easy, Im just dum!

[ShannonN Friend ShannonNJoin date: July 2006Posts: 1947Downloads:0Uploads:9 Thanks: 16 Thanked: 172 times in 49 posts]

#220257

davib;15732Any experts wanna try and give us a step by step instruction on how to make the header images so they work?

I can see there are 3 parts to it but dont seem to be able to do it…Im sure its easy, Im just dum!

I’m no expert but I’ll try, what ya mean by work? The included ones work fine on my installation, are they NOT working for you or do you mean your attempts are not working?

all they are is 950 x 250 jpgs forget the narrow and wide images they look unused in this instance

so you take a picture of whatever crop it and resize it to 950 x 205 save it over one of the included ones (save as same name as an existing one) and it will show up

That is save your own image that is 950 px wide and 205px high ( same size as originals) and save to the same folder as the originals which is in the rochea/images/headers folder on your web host not your hard drive etc

you are best served to overwrite the original ones if you are not using them as they are hard coded into the site etc

If you have more than six you have to manually add the extra names to the index.php file at the appropriate place
Cheers ShannonN

[moviefan Friend moviefanJoin date: May 2007Posts: 43Downloads:22Uploads:0]

#220287

I just tried to edit those same images myself and it would be quite easy using fireworks, but I tried to edit the large images first using photoshop coz when you resize a photo to suit your needs, in this case, a rather large 950 px, it need to look good, and photoshop is good in doing that.

Once you open the big images, just paste the ones you want to use, but you need to make the whole canvas as 950 x 250 + the height of the small ones.

There are 2, so you need to edit the large image in 2 ways- one for the wide screen res and the other for the 800×600) You need to crop that part (at the lower left side) where it goes to those small files which you also need to open and then paste the cropped part into it.

[davib Friend davibJoin date: December 2005Posts: 81Downloads:0Uploads:3 Thanks: 7]

#220290

Thanks for the reply…yep I got it……cheers …a great help!……now I’m off to see my IQ doctor!

[ShannonN Friend ShannonNJoin date: July 2006Posts: 1947Downloads:0Uploads:9 Thanks: 16 Thanked: 172 times in 49 posts]

#220317

moviefan;15783I just tried to edit those same images myself and it would be quite easy using fireworks, but I tried to edit the large images first using photoshop coz when you resize a photo to suit your needs, in this case, a rather large 950 px, it need to look good, and photoshop is good in doing that.

Once you open the big images, just paste the ones you want to use, but you need to make the whole canvas as 950 x 250 + the height of the small ones.

There are 2, so you need to edit the large image in 2 ways- one for the wide screen res and the other for the 800×600) You need to crop that part (at the lower left side) where it goes to those small files which you also need to open and then paste the cropped part into it.

thanks for pointing out the smaller images are used I couldn’t see them appear on the header, I need to remember to use my reading glasses for computer work not my distance ones 🙂

ShannonN

[moviefan Friend moviefanJoin date: May 2007Posts: 43Downloads:22Uploads:0]

#220353

<em>@davib 15792 wrote:</em><blockquote>Thanks for the reply…yep I got it……cheers …a great help!……now I’m off to see my IQ doctor!</blockquote>

It took me a while to get used to editing images myself, I just began using joomla like 4 months ago…so I still am a bit hesitant to edit just about anything….but editing images are ok…the css template file and the index.php are the ones that I’m a bit afraid to touch! :p

[zoom4267 Friend zoom4267Join date: March 2007Posts: 95Downloads:0Uploads:1]

#220480

editing that small image is a real pain. mabey its the picture im using,but its taken me way toolong to get that little picture right. i use fireworks for that

[zoom4267 Friend zoom4267Join date: March 2007Posts: 95Downloads:0Uploads:1]

#220568

okay, here is what i did and it worked great in 5 minutes( ignore my preveiouse post, i was having a rough day and nothing was working)

go into photoshop, get the 2 images from the template. for the larger one. change the height by the size of the smaller one. the larger one is 205 high, the smaller one is 89 high so you need to increase the larger one by 89.

then merge the two layers – “layers – merge”

then make a box for the empty space and make sure it is on top of all of your other layers.

import the photos or images that you want. make sure the one on the left fills the whole area and make sure the right one is sized to fit in the shorter area. keep the box on top so you can see the area you are working with

then slice the top and the bottom and the box

then save for the web, you will have 3 slices.

i have them in a different folder as not to overwrite the originals.

then name them the same and uploade and voila!! perfect.

[dpk Friend dpkJoin date: June 2006Posts: 129Downloads:0Uploads:0 Thanks: 19 Thanked: 2 times in 1 posts]

#222124

How do you get the fade effect on the bottom edge of the small image — using freeware, like the GIMP?

[zoom4267 Friend zoom4267Join date: March 2007Posts: 95Downloads:0Uploads:1]

#222429

<em>@dpk 18172 wrote:</em><blockquote>How do you get the fade effect on the bottom edge of the small image — using freeware, like the GIMP?</blockquote>

i didnt use the fade effect. but its just a gradiant.

[dpk Friend dpkJoin date: June 2006Posts: 129Downloads:0Uploads:0 Thanks: 19 Thanked: 2 times in 1 posts]

#222466

how do you create a gradient?

[kani Friend kaniJoin date: June 2007Posts: 19Downloads:0Uploads:7]

#222492

<em>@zoom4267 18624 wrote:</em><blockquote>i didnt use the fade effect. but its just a gradiant.</blockquote>

plz ssend quick reply

[ShannonN Friend ShannonNJoin date: July 2006Posts: 1947Downloads:0Uploads:9 Thanks: 16 Thanked: 172 times in 49 posts]

#222495

kani;18711plz ssend quick reply

Easy, learn how to use a art package that supports gradients? there are thousands of tutorials out there that show you how, it’s a matter of having a suitable art program, for the cheapskates there is GIMP a freebie, or for serious web designers there is Fireworks or Photoshop

Anyone trying to play at being a web designer should know how to use an art package especially how to use and manipulate layered images etc as it’s so much a part of web design these days. Web design takes time and learning, trial and error and a lot of study.

ShannonN

[dpk Friend dpkJoin date: June 2006Posts: 129Downloads:0Uploads:0 Thanks: 19 Thanked: 2 times in 1 posts]

#222544

that’s what I’m asking you–do you know any info pages on how to do this with GIMP?

your rudeness is unnecessary. lots of people who use these templates are not “web designers” and do not pretend to be. in fact, no serious web designer would use someone else’s templates. the vast majority of joomla sites are badly modded templates by amateurs, many of whom have no real commercial interest. it’s a hobby.

[jasonre Friend jasonreJoin date: July 2006Posts: 56Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#223109

I’m no expert, but here’s a file I made that will help you out.

http://www.rmogolf.org/html/templates/ja_rochea/images/headers/JA_Rochea_3_PartHeader_Source.png

You can see how it turns out at http://www.rmogolf.com

Here’s the steps:
1) Open the .png Fireworks file. Works best if you use Fireworks. I’ve embedded the slices in layers. Can use Photoshop too.
2) You see 3 unique slices. The large header part and the 2 lower left slices that overlap each other. The slice on the bottom is for wide and the top overlapping slice is the narrow slice.
3) Just drop the image you want for the header in, move it down to the bottom of the layers.
4) Just right click on each slice and export each individual slice to a local folder. Do the lower left, wide slice last. You want to move the top narrow slice over so that it doesn’t overlap the bottom slice when you export it, otherwise it will get cut off. When you’re done, just move it back. Then ftp those files to the server.
5) The name is preset for the homepage images. If you do more just remember to rename them to the next number in sequence.

That’s it! Pretty easy with this template.

[Author]

Posts