Web Design / Image Help

Revels · Sep 5, 2007

Right guys, im hoping one of you clever bunch can help me out with something..

Basically I have loads of images that I want to put on a site and have a border around each image. But I cant be arsed to edit each one with photoshop to put the border on.

Is there anyway I can put the border on but make it "hollow" and then add the image separately so it will appear in the middel? then I can just edit the code..

Ta xx

Rich · Sep 5, 2007

I use a photoshop action to put a border and resize all my images.

The Border /watermark file is a photoshop file created at the size I want the images to be at with a transparent background.

Record an action which resizes images to the same size as the border file and then places it in, you can then run this as a batch process on all your images.

Revels · Sep 5, 2007

Cheers Rich, but its not as simple as single borders like that^^

Im going to try and explain it agian..

Basically I have like 50 versions of that, I want them all to look like the polaroid style, but to save me saving to web after I change each layer, I was wondering if there was a quicker and easier way..

Red Cup · Sep 5, 2007

Use the empty polaroid as a frame on the page, then have the image over the top.

Like the pics here: http://www.cliomods.com/events/cliocup-oultonpark/

The slide is one image:

Then the cars are another:

Adams_16v · Sep 5, 2007

create a class and have the background image as the polaroid image with set margins, padding and image size so it fits perfectly inside.

i have used something similar here for the large list of property.

http://www.spacestolet.co.uk/view_all.php

Revels · Sep 5, 2007

Cheers guys. That sounds better.

Im a bit of a n00b so im not 100% sure what im doing.. Does someone fancy making me a bit of code please?

Daz · Sep 5, 2007

Revels said:
Im a bit of a n00b

:quiet:

Revels · Sep 5, 2007

Dont you start, b**ch! :rasp:

Revels · Sep 6, 2007

Anyone fancy making me the code?

Rasclart · Sep 6, 2007

No now piss off and learn yourself

Revels · Sep 7, 2007

Shut up you, cider boy!

Daz · Sep 7, 2007

Look at the flood of code samples being offer

echo "do it yourself";

Rasclart · Sep 7, 2007

LOL owned by a Linux geek

High five Daz

Daz · Sep 8, 2007

Rasclart said:
LOL owned by a Linux geek

High five Daz

All gone quiet over Revels' way..
He's up to:

Code:

<html>

I think?

Revels · Sep 8, 2007

You're not funny, Daz!

I attempted to copy code, but that wasnt as easy as I was hoping!

172.com · Sep 16, 2007

Daz said:
Rasclart said:

LOL owned by a Linux geek

High five Daz

Click to expand...

All gone quiet over Revels' way..
He's up to:

Code:

<html>

I think?

LOL.

If you need help with coding Revels' this is a good resource...
http://tinyurl.com/3xuaf8

A tip for you... the next part is <head>.

Revels · Sep 16, 2007

Thanks, only another 64 posts and you will have written the code for me!

Daz · Sep 16, 2007

<title>Pics of me nekkid</title>

Revels · Sep 16, 2007

<body>

Daz · Sep 16, 2007

Revels said:
<body>

FAIL!

EVERYONE knows it's </head> next! :rasp:

172.com · Sep 16, 2007

^^ s**t, that's where I've been going wrong!

Although, if it was christmas and the CS site, the next few lines would've been along the lines of the following...
<script>
function fnGayFallingSnowToPissEveryoneOff() {
...
}
</script>

Daz · Sep 16, 2007

Well, Revels has never been the best at finishing head off.. :dapprove:

Revels · Sep 16, 2007

If you 2 would stop taking the piss and help me that would be much better!

Ive got man flu, mistakes are allowed!!

Daz · Sep 17, 2007

Ok, Sorry.
Try this as your image tag.

Code:

 <img src="images/image1.jpg" style="put-me-a-nice-border-on-cus-I-cant-be-arsed-to-edit-each-one-in-photoshop: true;" alt="Me with no clothes" />

HTH
KTHXBYE

Revels · Sep 17, 2007

Red Cup said:
Use the empty polaroid as a frame on the page, then have the image over the top.

Like the pics here: http://www.cliomods.com/events/cliocup-oultonpark/

The slide is one image:

Then the cars are another:

Daz said:
Ok, Sorry.
Try this as your image tag.

Code:

<img src="images/image1.jpg" style="put-me-a-nice-border-on-cus-I-cant-be-arsed-to-edit-each-one-in-photoshop: true;" alt="Me with no clothes" />

HTH
KTHXBYE

No Daz my sweetness!

I want it like Red Cup said..

Rob · Sep 17, 2007

Will all the images be visible at once?

Or will it be 1 per page?

I.e will this boarder need to move or can it be fixed?

What is this page for? I.e paying client, yourself?

Revels · Sep 17, 2007

Ummm, there will be more than 1 on some pages, 1 on others.

Its just for me.

Rob · Sep 17, 2007

Ok give me a little while, its late and i'm pretty tired so don't hold me to the fact it'll work.

Revels · Sep 17, 2007

ok mate, thanks..

Thats the image, but I just want the polaroid style to be the border and then I can add each image without having to make each one with photoshop..

Daz · Sep 17, 2007

Ok, Because I'm good to ya..

image.jpg == image you want showing
bg.jpg == the background image

index.html:

Code:

<html>
    <head>
        <title>Revels</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
        <h1>Daz rocks</h1>
        <img class="bg" src="image.jpg" /">
    </body>
</html>

style.css:

Code:

.bg {
    float:left; 
    margin:10px; 
    padding:29px 20px 38px 10px;
    background: url(./bg.jpg) no-repeat;}
}

172.com · Sep 17, 2007

I was going to make him sweat a bit more.

Daz · Sep 17, 2007

Oh, and obviously changing the margin: and padding: in the CSS to make your image show up in the middle of your background.

Daz · Sep 17, 2007

172.com said:
I was going to make him sweat a bit more.

Yea, I was tempted..

Rob · Sep 17, 2007

Beat me too it, i'm not a great coder yet, but give it time eh, just finished a webpage but i need a lot more practice! Do you do it for a living daz?

Daz · Sep 17, 2007

Robbos said:
Beat me too it, i'm not a great coder yet, but give it time eh, just finished a webpage but i need a lot more practice! Do you do it for a living daz?

I'm not a "Web Designer" as in doing it as a job, but I do quite a bit from time to time..

172.com · Sep 17, 2007

Robbos said:
Beat me too it, i'm not a great coder yet, but give it time eh, just finished a webpage but i need a lot more practice! Do you do it for a living daz?

FLOL! As if!.

He's a total amateur.

Daz · Sep 17, 2007

172.com said:
Robbos said:

Beat me too it, i'm not a great coder yet, but give it time eh, just finished a webpage but i need a lot more practice! Do you do it for a living daz?

Click to expand...

FLOL! As if!.

He's a total amateur.

:dapprove:
I'm hurt.. I really am.

172.com · Sep 17, 2007

Rob · Sep 17, 2007

Gotta love the banter, I will know who to ask if (when) i get stuck then daz

Revels · Sep 17, 2007

I love you guys.

I say love, its a more lust!

oh and Daz, you took a biiiiig gamble with me being the n00b I am, that I use CSS! lol

Web Design / Image Help

Similar threads