working on a blog site for local salt water angler and have a good idea of my layout direction but could use some ideas, opinion, or even sarcasm about my current graphics.

http://saltyblogger.com

Well I think the colors look great! (that's the sarcasm you asked for) . Seeing as how it has to do with water, blue may be a good color to incorporate. Try lighter blues. (or turquoise if it's salt water)

I like the Salty Blogger font but the " l " is so close to the "a" in the word Salty. What font is that?

Sometimes really faint bg colors in your divs can set it off too.

I'd like to see more of a completed layout, that can help when adding color and graphics.

lol. thx. i dont remember what font, something in gimp. ill keep checking back as i get more done on it. i have a bit of a hard time getting any level of accuracy with my colors. i can picture the color but just cant quite get it, more so with cool colors.

You don't have to be an artist to become technically skilled with Photoshop / HTML / CSS. It just takes practice and dedication. Start by copying other people's work.

i could be wrong but my html and css aren't lacking. but my graphics ability after over a year has not improved. i have always had a hard time with color. I am not comfortable with copying anything, i would rather learn how improve on simple graphics. i have read a lot of tutorials on this but they almost always give the how and not the why. so they teach how to recreate the product in the tutorial but without the why i have not been able to translate that into my own abilities. ie.. fact vs concept.

HTML/CSS is a presentation language. It's important not only to learn to use it to present things structurally, but also aesthetically. You don't do a lot with images in your CSS. That's a huge thing to learn how to do. Splicing background images into your HTML with CSS is an "art" (forgive the language lol).

Splicing? background: url(); ?

Yeah, like that... but look at a site like http://www.iaqalert.biz/ How would you duplicate the results if you had the images already created? Requires some serious CSS work!

oh http://citicommons.com or http://howtonrealty.com (thats real wood with some gimp). but its subtle color work that i lack in.

Those are simple horizontal repeats. Look at the boxes on the bottom of iaq... they have 3 layers of background images overlaid on top of each other to achieve an expandable box. Things like that get tricky. If you feel confident in your ability to do that type of splicing of background images, then you should focus on Photoshop.

and the realty site has no MLS because the client is to lazy to sign up an account for it.

yeah i have played with some of that. what is in photoshop that cannot be done in gimp. or any tips on getting those subtle effects in color you have in the example.

Try doing some tuts on design...

http://net.tutsplus.com/tutorials/ht...-from-scratch/

http://www.grafpedia.com/tutorials/w...ayout-tutorial

the nav bar is pretty much what im talking about. the fade is very subtle and gradual. also not a st8 #00ff00. i would have to copy the color hex and even then i wouldnt be able to get the same effect out of it.

This is a big step you'll have to learn to take as a designer... STOP USING HEX CODES.

Don't even LOOK at them. Open your color picker and pick colors in the "sweet spot" (see below) for your primary colors.

Use soft-light gradients (black-to-white, 50% opacity) to get the subtle "Web 2.0" shading you're looking for.

Use layer effects (see button stages below) to achieve web 2.0 look and feel.

Attached Thumbnails

         

   

I made a little less complex expandable boxes on my site that may help get you started. All you need is a top, middle and bottom images. I'm sure you can make a decent looking box, then you chop off the top and bottom and middle, save them as separate files, and use them as bg images.

You can use these boxes instead of the 1px wide divs you have made for borders, and they will really set off your site.

If you want some code or a short tut on my simple way, let me know. Smosely's example is very similar, it's just the content inside his boxes has a little more stuff in them.

More on some Web 2.0 effects... here I'm making a drop shadow and reflection for the button so it looks like it's floating, adding a gradient to the background to add depth, and adding an outer glow to the original button to make it stand out a bit from the BG - like it's got a light on it that makes it glow.

I also attached the PSD as a zip for you to download and inspect to see what I'm doing here.

Attached Thumbnails

         

         

Attached Files

button.zip (66.5 KB, 13 views)

yeah aero i would love any help on this. i will play with everything suggested.

thx to both for the help.

Steve mentioned a subtle key point, which is opacity. When you start playing around with opacity and layers, then you will find a whole new world.

Here's a great exercise for you.

1) Draw a box, any color, fairly big
2) Draw a circle, the SAME color, fairly big
3) Repeat step 2 another 3 times, so you have about 5 layers altogether
4) This part is key, set each circle to have a different opacity, from 5 to 95
5) Move the circles around and watch what happens to the colors underneath, 3 or 4 layers deep

The beauty in this is that all these different colors will match, almost give you a palette.

Also, try changing the color of some of those circles and see what happens. It's all about experimenting.

Then try some gradients with opacity. I think this exercise can keep you busy for quite some time.

Then you can also write the hex values down on the ones you like.

Gotta go for now, tonight I'll whip something up.

The sweet thing about photoshop is that if you set it up right, you can change the entire style of a design with just a few settings changes.

Here's the same button, and with about 4-5 minutes of work it's now carbon fiber!

Attached Thumbnails

 

Attached Images

button2.psd (433.3 KB, 11 views)

You guys are great with photoshop, but I've been at it for years too, and I know how to change opacity, I know about layer styles, opacity etc etc etc but i still SUCK with colors & design....i've come to accept that, thats why there are people who ONLY do design, and people who ONLY do programming. I am a programmer, NOT a designer, ive come to terms with that, but, thats why there are templates you can modify, and prebuilt systems you can use.

Dorky im gonna be honest, what your setting up looks like a blog....why not just use wordpress, grab a nice theme and modify it? or Drupal if you wanna customize more than WP. Sometimes you have to know your limitations

Sorry if this all sounds harsh, but this is what ive learned over the years.

no not harsh at all. but i like to take on things that are hard for me. its the only way to grow. think back to your first site. i have a few high end goals over the next year and these sites i hope will give me not only a side income but also bring me closer to those goals.

oh and it looking like a blog is kinda a complement, thats what i was going for lol.

keep in mind i only went to school for my A+(computer hardware). everything else i have learned from google, php & mysql for dummies, and here. im still less then 2 years into it. although i did write in basic back in the day(win 95/98 utility programs).