Photoshop/Web Design Help

[zandre88]

Hey everyone!

I've been trying to get back into the wonderful world of web design but its slow going at the moment because of my extremely long absence. I haven't build a website from pure scratch since about 8th grade which was in 2001ish. So it has been quite a while and even than it was more amateur in nature. I would like to do this as a very small side business or maybe not even so much as a business but to help friends and also to promote and build a website for my other business which is a lawn care company.

Anyways I've been surfing the web looking for some free templates to kind of get me started. Most of those out there are relatively basic but I don't have a problem with that because I need to learn the basics before I jump into trying to put together a comprehensive "high-end" website. Right now I am working on trying to build a website for my lawn company to help stimulate business and just to have it.

Getting to the point I found a free template that I liked and am playing around with it trying to customize it to fit my lawn care website. At the moment my only real problem is the background image that I believe was created in Photoshop. Unfortunately I am extremely inexperienced with Photoshop so I have no idea on how to recreate this background image using the image I'd like to for my lawn care website.

So here is where I need help. If anyone would be willing to either teach me or reproduce the stock background image with the image I'd like to use with the website it'd be hugely appreciated. I will go ahead and insert the picture below...



I would like to have the same effect and but with an image like these or something similar...





I believe I might be able to achieve the black fading circle type deal (LOL I'm such a noob w/ some of this stuff sorry) but I am not sure how to go about creating the fading box (I hope you understand what I mean). If anyone could help me with this it would be HUGELY appreciated. I'm sure for somebody this will be like a joke but for me I'm just not good enough with Photoshop to accomplish the same results and the stock one.

Also just so you know the stock picture I uploaded and linked above is the exact photo used as the background for the website template. It has not been altered or re-sized at all.

Again any help would be HUGELY appreciated especially if you could maybe help me to figure it out on my own but even if you'd just rather make a quick mock up of the stock image using the photos I provided or another lawn picture (I just typed in "lawn" in google image search and found tons of them) I would be so grateful.

If you need any extra information from me or have any questions please let me know.

Thank you in advance!

 

[Spit-wad]

Don't have Photoshop on my laptop, but I can tell you how to do it. Use the "Rounded Rectangle" tool from your toolbar. Once you click on it, at the top, there are some different options you can set. Set the radius to maybe 5 or 10px (you can play around with it until you get what you want), then drag out your rectangle.

Next you want to double click on the rectangle layer in your layer's pallet. Drag the opacity down as far as you want (75% might be a good starting place). If the color of your rectangle is not already black, you can do so with "Color Overlay". You might also want a stroke - 1px black is worth a try.

By the way, you might not have the rights to use those lawn pictures on your website. Search for some "stock photo" or "copyleft image" sites. Google images also has the ability to search for copyleft images in the advanced search menu.

 

[zandre88]

Don't have Photoshop on my laptop, but I can tell you how to do it. Use the "Rounded Rectangle" tool from your toolbar. Once you click on it, at the top, there are some different options you can set. Set the radius to maybe 5 or 10px (you can play around with it until you get what you want), then drag out your rectangle.

Next you want to double click on the rectangle layer in your layer's pallet. Drag the opacity down as far as you want (75% might be a good starting place). If the color of your rectangle is not already black, you can do so with "Color Overlay". You might also want a stroke - 1px black is worth a try.

By the way, you might not have the rights to use those lawn pictures on your website. Search for some "stock photo" or "copyleft image" sites. Google images also has the ability to search for copyleft images in the advanced search menu.

Thanks. I always forget about that rounded rectangle tool but I think I can knock that part out now most likely. I will come back if I have anymore questions.

Next though if you notice how the stock picture has the black like blur around it from the bottom up around the edges (hopefully you understand what I'm trying to explain) I want to do the same with that picture. How would I go about doing that? Does anyone know?

Thanks again all!

 

[Peter.Cort]

what you can do is make a new layer in photoshop use the paint bucket tool, and make the whole layer black. then go to where it says "normal" right above the layers and change it to "soft light" and then erase the bits that you don't want the black on.

the same method applies if you want to lighten an area.