Quick Login
A webmaster forum specifically catering for Australian site owners. We discuss site development, marketing and management issues.
Please welcome our newest member, HaMiDoZ!
Spice up your web site with the ultimate community message board solution!
Fake Id'sGet fake Id's made right now!
vBSEOSearch Engine Optimization for your VBulletin Forum.
AdminFusion
»
Help making an image fluid.
06-02-2006, 01:03 AM
| #1 |
| | |||||
Title: Chadwick ≥ Cadence
Join Date: Sep 2005 Posts: 1,636    | Help making an image fluid. On my site (in my footer) you will see I have a footer image. I really like that footer image but I want my site to have a fluid skin. Should I just change the image completley or is there a way to get the skin to look good fluid? Edit for you lazy people here is the image. 
__________________  | ||||
| |
|
06-02-2006, 01:13 AM
| #2 |
| | |||||
Title: Administrator
Join Date: Sep 2005 Posts: 10,246 Location: Athens, GA | I'm not good with fluid images, coding, and what not...but I think what you will need to do is to create two images - one of the fuselage and one of the sand to the left of it. Once you've done this, you align sand image to the left and code it to stretch to the fuselage...and then you have the fuselage aligned to the right, normal size. Most fluid designs use repeating images...but that wouldn't look good in this situation because the sand needs to have a varied look...again, dont ask me how to code an image to stretch, that is for the techy gurus 
__________________ ...some super-sweet signature | ||||
| |
|
06-02-2006, 01:29 AM
| #3 |
| | |||||
|
Title: Chadwick ≥ Cadence
Join Date: Sep 2005 Posts: 1,636 | Thanks for the response, I have tried streching the width but that kind of looks mess up. So I think I am going to start on a new image...unless anyone has any ideas?
__________________ | ||||
| |
|
06-02-2006, 01:57 AM
| #4 |
| | |||||
Title: AF Lead Developer
Join Date: Sep 2005 Posts: 1,186 Location: OHIO, US 
| due to the fact that the sand line in the image is not straight, making that fluid is going to be difficult to impossible.
__________________ Do not post your PF private key in public. Did I help you with this post? If so, pls click the rep button or send money.  | ||||
| |
|
06-02-2006, 02:56 AM
| #5 |
| | |||||
Title: Dave's not here...
Join Date: Dec 2005 Posts: 418 
| Well, I have an idea... . It won't really be a fluid image, but it will get the job done while keeping the theme in tact.What you will need to do is cut your image into two separate ones. Then, instead of having the sand continue across the entire page, on both of the images have the sand get lower and lower until it is no longer there. Like Ryan said, align them to their respective sides. Reading that may come off a little confusing, so I decided to steal your image and edit it for the purpose of demostration, I hope you don't mind . I also added a little shading...Image Thumbnails left.jpg  right.jpg  PSD's left.psd right.psd
__________________ | ||||
| |
|
06-02-2006, 08:03 AM
| #6 |
| | |||||
Title: Gas 1.43
Join Date: Feb 2006 Posts: 3,984 Location: back in TX 
| I wish I knew if your footer could have divisions. (or be a division) If so, I would suggest making your footer 2 images. One of the fuselage only, with no sand (clear gif), and one of the beach- extra long if you could manipluate them. Then, all you would have to do is set the background image of the division to the beach, and then place (float) the other image to the right. No matter where it was, it would look good on the other image. God I wish I could explain myself.
__________________ I went to Vegas, and all I got was this Blister. - true story! | ||||
| |
|
06-02-2006, 08:40 AM
| #7 |
| | |||||
|
Title: Gas 1.43
Join Date: Feb 2006 Posts: 3,984 Location: back in TX
|  I did a rough draft of what I was trying to say. In the photo below, I placed the fuselage on the left, and it still looks good. No matter where I place it, it blends in with the background. Let me know if you'd like to see the psd.
__________________ I went to Vegas, and all I got was this Blister. - true story! | ||||
| |
|
06-02-2006, 09:00 PM
| #8 |
| | |||||
|
Title: Chadwick ≥ Cadence
Join Date: Sep 2005 Posts: 1,636 | SKETCHi , I am looking at the one you posted and it looks very nice, I am just waiting to put it into the site(my site is down) but on my photoshop version of the skin it looks great. Red Matrix , could I see the PSD of it? Or atleast the 2 images. Did you figure out a way to manipulate theimage? If not don't worry becuase I like the way SKETCHi;s looks too.
__________________ | ||||
| |
|
06-02-2006, 10:37 PM
| #9 |
| | |||||
|
Title: Chadwick ≥ Cadence
Join Date: Sep 2005 Posts: 1,636 | http://www.lostgurus.com/forums/index.php?styleid=12 I just can't for the life of me figure out how to get rid of the "whole" between the two images. Code: <tr>
<td style="background-image: url('http://www.lostgurus.com/forums/images/bbg.jpg');">
<img src="http://www.lostgurus.com/forums/images/left.jpg" align="left" />
<img src="http://www.lostgurus.com/forums/images/right.jpg" align="right" />
</td>
</tr>
__________________ | ||||
| |
|
06-03-2006, 07:47 AM
| #10 |
| | |||||
|
Title: Dave's not here...
Join Date: Dec 2005 Posts: 418
| Red you're a genius! I can make a nicer cut out of the fuselage and a really long bar of sand. Using Red's idea would probably get the effect your original skin had. What he is trying to say is let the sand tile as a background image and then align the fuselage image on the right. The code would look like... Code: <td style="background-image: url('sand image'); background-repeat: repeat-x">
<img src="the fuselage" align="right">
</td>
__________________ | ||||
| |
 |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| Display Modes | |
| |
Similar Threads | ||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Graphic Design Glossary | shellspeare | Graphics and Design | 2 | 12-28-2008 12:47 PM |
| [Tutorial] Using Image Slices to Create a web page | Skyline_R34 | Graphics and Design | 4 | 07-23-2006 04:33 PM |
| Image Hosting Starting at $0.40 a image | Jemrada | Buy and Sell | 0 | 02-25-2006 01:20 AM |
| [IPB] Add image uploading to your forum | ben_ | Invision Power Board | 2 | 10-28-2005 08:27 AM |
Linear Mode
