SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)

    Putting an image into a site...

    I have been playing with a free photo I got and came up with this:



    I am trying to figure out how to incorporate it into a design though... I want to learn how to blend it into a design seamlessly... Any tips?

    Thanks,

  2. #2
    i'm a girl silver trophy Toni's Avatar
    Join Date
    Oct 2002
    Location
    BC, Canada
    Posts
    1,022
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you have a link to the design you want the photo to work with?

  3. #3
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I didn't explain very well...

    I want to design a site around that picture. I just can't figure out how to do it and make it look good.

  4. #4
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I guess I am not explaining myself very well...

    Can someone just point me in the direction or teach me how to design a site??

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, but why is this "advanced design" ?
    anyway, i'd say that first of all, you need to establish what your site is actually about, what the content is going to be, who the potential audience is, etc...before deciding that you want a site looking like that image.
    next, you decide your whole structure, navigation, etc
    only once those pieces are in place, should you start thinking about the visual aspects. what colours are you going for, what style, etc
    off the top of my head i'd say go for a simple line-drawing style, using the outlines of the shed. use the horizon line as a horizontal dividing line. something like that, anyway
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips redux. I don't know why I put this in advanced design... Maybe an advisor can move it??

    I am really trying to get into this whole design thing (been trying for a while) and it just isn't going well.

  7. #7
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Sounds kinda like the cart leading the horse a bit.

    It's probably easiest to design when you've got a real world problem to resolve (ie. I need to sell this stuff online, I need to present this information), rather than just trying to make use of a good image.

    I actually have a folder of partly finished logo ideas, 2nd and 3rd option website designs that were never chosen, illustrations, digital photos, experiments and other ideas that i always keep in the back of my mind. Sometimes it takes 3 or 4 years, but I always eventually come to a job that is perfectly suited to using each one of these bits and pieces.

    Maybe there's a country music label/farming equipment sales/distance learning website with your name on it out there. You just gotta wait for it to find you
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  8. #8
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about something like this?
    Attached Images Attached Images
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  9. #9
    SitePoint Enthusiast Novapages's Avatar
    Join Date
    Mar 2003
    Location
    Utah
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Adam P.
    What about something like this?
    You could do like Adam P suggested, or you could make the field & sky a seamless background for a table cell & then put the house in front of it. That would not be a problem, as long as you know what's the rest of the site is going to be about.

  10. #10
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah...i knew i had seen something cute done with a farmhouse some time ago. dug it up: http://www.phish.com/farmhouse

    (done by http://www.choppingblock.com )
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  11. #11
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well I am designing for my personal site right now and I have been messing with images that I find just trying to come up something unique. My problem is then integrating the images that I find into the design.

  12. #12
    SitePoint Enthusiast Novapages's Avatar
    Join Date
    Mar 2003
    Location
    Utah
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hartmann
    Well I am designing for my personal site right now and I have been messing with images that I find just trying to come up something unique. My problem is then integrating the images that I find into the design.
    OK, well, what I described really isn't that hard for me to do, its just hard to describe. So here, I'll do it and show you, step by step.

    1. I copied your file into PSP (I can give you photoshop steps if you prefer) then increased the color depth --> colors / increase color depth / 16 million <-- so I can use the right filters and brushes I'll need.
    2. I used the clone tool to fill in that darker purple stuff in the upper right corner since you probably don't want that repeating.
    3. I used the rectangular marquee tool (antialias off) to select the right section of the image where its just field & sky, the part I want to tile seamlessly left to right, then I copied and pasted it as a new image.
    4. Since I don't think this image is wide enough to tile properly, I'm going to double the width via image / canvas size, noting the current width is 72 I'll set it to twice that, leaving the height as is and making sure the horizontal positioning is set to left = 0.
    5. I pasted the image again and moved it over to the right side of the image.
    6. I used the painting / retouch / clone tools to clean up the seam.
    7. I used Simple Filters left-right wrap. You can download simple filters here http://www.btinternet.com/~cateran/simple/ OR, calculate half the image width which is in this case 72, double click the rectangular selection tool, select exactly the left half of the image top to bottom, copy that, paste it into a new image, and double the image width, this time making the image go to the right. Go back to the image you were working on and select the right half of the image now, and paste it on the new image's left. Obviously the simple filter is easier.
    8. Clean up the new seam. I improvised and made the bush a bit different this time.

    9. I deleted the sky so it will be my transperant area which will blend into the rest of the page. Then I saved the file. This is your seamless background, use it as the background of a table cell that equals the image's height.

    Back to the original file! I now need to fix the farmhouse up so it will sit on the seamless background without too much trouble. First I cut it out to the edge of the barn. Then I delted the sky. Now I think if I just delete some of the grass (so the bottom grass will show through) it'll look about right.

    The end result? I would've been happier to have more field to work with, but but this isn't too bad considering.
    Attached Images Attached Images

  13. #13
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yeah I am using Photoshop 7... You should turn that into a tutorial, I am sure others would find it as useful as I am.

  14. #14
    SitePoint Enthusiast Novapages's Avatar
    Join Date
    Mar 2003
    Location
    Utah
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hartmann
    Yeah I am using Photoshop 7... You should turn that into a tutorial, I am sure others would find it as useful as I am.
    Well, that was quick & dirty, and I don't think it was written well enough for a tutorial. But I may clean it up a bit and do just that. I'm thinking of adding tutorials to my site so that would go well there.

    Anyway. Photoshop is easier to do this in, IMO, just PSP is cheaper so its easier for most people to get. Here are the modified steps:

    3. You'll need to copy this, go file, new image, then paste it there.
    4. Go to image / canvas size / and enter the new size: just use the anchors for left positioning.

    7. Though I still recommend the simple filters as they're quite handy, you can just use photoshops offset filter to do the same thing. Set verticle to 0 and you can do the horizontal at whatever space you need to work with the seam.

    Other than that everything is the same.

    It's too bad the attachment isn't there yet so you can see the effect..

  15. #15
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if u want 2 blend an image into something else

    1.create a new layer in photoshop ctrl+shift+n

    2. paste in the image u want 2 use

    3. then select the eraser. try to select one with a soft edge. make tsure the size is nice and big.

    4. now just wack out the edge


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •