29 replies to this topic

[Boss]

Project for the next 14 days.

Attached Files

•  960_grid_16_col.jpg   97.47K   17 downloads

[FullMetalBabe]

Pretty squares! (not reallehh)

oO What is the project about? I like the layout, though.

[Boss]

It's going to be a hosting template. Sort of like a wireframe, but not quite. You're looking at header area, slider with informational images, three main packages, testimonials area and then a domain registration. Although, I might change those two into an About Us area, and of course the footer area.

The header area will include the mock logo, menu system which will be designed for JS drop down boxes, if not, possible design of CSS sprite images to save on HTTP requests and because modern browsers support them. The phone number area on the top right, with live support indication available.


My only real problem is creating the icons used on some of the pages by hand. I don't like the free OK TO USE COMMERCIAL icons because they sorta suck. The only thing I do need help is with the live preserver icon, I dunno how to make one of those. Well, I do in my head, but Photoshop can't keep up with my brain. :P

If I don't get to set this up for a template, it can be used for WHMCS integration. Although the pain of that is, from what I've been told by a friend, is that it can be a royal pain in the butt when it comes to editing things.

This project is for my benefit, but if I lose interest I'll happily put it up for sale. If not, It'll probably be coded with a separate stylesheet for IE6, but if IE7 and IE8 support CSS3 like other browsers out there, I'll code it in CSS3, as soon as I learn what's changed since the previous version, which shouldn't be much. I've got some nice JQuery scripts that will work great for the login system to take the user to the WHMCS client login while integrated, and of course the slider. I'm trying to find a site I recently saw that used a JQuery script where you could write over the images being slid, so in essence that text could be crawled, somehow.


I'm trying to find a color combo suite ATM, but I'm having so much trouble because my Adobe Kuler AIR program is on the fritz and their site hasn't been working in a few days. :(


My biggest problem is finding free fonts that can be used in commercial work. Most of my fonts are Adobe fonts which are roughly 1-8 dollars each, and I don't want to pass on another purchase to the buyer if I decide to sell the template in its PSD form later on.

[FullMetalBabe]

Delicious - a free font from exljbris Font Foundry  Is my personal fave sans-serif, you just have to credit the author for the font if you will use font face embedding either as a comment in the CSS or on the webpage.

:) I've bought Fertigo Pro Script from him, his work is excellent.

[Boss]

Just the CSS? Sounds fair. Just found FontSquirrel and this:

40 Excellent Freefonts For Professional Design - Smashing Magazine


I usually find Smashing Mag to give out some good freebies for commercial stuff. BTW, do you know where I can find a tutorial on how to make a life preserver icon? I might be using the wrong word, but I'm sure the orange and white breathsavers like candy thing is a life preserver.

[FullMetalBabe]

X3 Life Preservers? Lifebuoy?

[Boss]

[FullMetalBabe]

Ahh, yes yes, lifebuoy. X3 Hmm, no, but I don't think it's hard to make a vector out of it?

[Shelley]

I've just woken up so the image is very crude (two minute job boss). This is not to design it for you but to show you the method I would take. The screenshot is a face on view though if you want to have perspective as shown in your screenshot I would use the Edit >> Transform >> Distort tool.

I haven't added in all the highlights, shadows etc but i'm sure you knowhow to do that yourself. ;)

Here's my crude effort and here's the psd that shows you the method I took to start it off.

Attached Files

•  lp.psd   394.94K   1 downloads
•  life_preserver.png   23.75K   5 downloads

[FullMetalBabe]

That's really good, Shelley. X3 I will test out in a bit how to make that.

[Boss]

Watching a movie at the moment, but took a quick look.

Shelley, that's pretty much what I thought I should do. When I drew it out on paper, I was going with a red ring, and then carefully shaped white stripes, which I'd copy the paths to and paste them onto the same layer and then finely adjust them into position.

Thank you! I'll probably go with a reddish orange color myself with a hover shadow underneath. Will probably make the icon in a separate document at 500x500 scale and then copy the group, resize it, and save it as PNG and then import it. I could also convert the file into a smart objects and then import it into the main document, but layout layers can reach 300 layers easily. I'll probably keep the main file so I can use it again in the future. Your layer mask sheen isn't in vector, right?

Also, do you recommend making the icons for the site in PS or Illustrator?

Edit: And someone remind me to finish those tux ranks.

[Shelley]

Boss said:

Watching a movie at the moment, but took a quick look.

Shelley, that's pretty much what I thought I should do. When I drew it out on paper, I was going with a red ring, and then carefully shaped white stripes, which I'd copy the paths to and paste them onto the same layer and then finely adjust them into position.

Thank you! I'll probably go with a reddish orange color myself with a hover shadow underneath. Will probably make the icon in a separate document at 500x500 scale and then copy the group, resize it, and save it as PNG and then import it. I could also convert the file into a smart objects and then import it into the main document, but layout layers can reach 300 layers easily. I'll probably keep the main file so I can use it again in the future. Your layer mask sheen isn't in vector, right?

Also, do you recommend making the icons for the site in PS or Illustrator?

Edit: And someone remind me to finish those tux ranks.

I would make the icons in photoshop. Construct them using the pen tool and it's sub features to craft out the shapes.

Before I forget, remember those Tux ranks boss? did you ever finish them? If not, I think you should, they had that creative edge that is worthy of the status of "completed". From a person that leaves 90% of her work incomplete.

[FullMetalBabe]

Sorry to ruin the thread, but was I close to making a 'good' lifebuoy or life preserver D;?

X3 I didn't use the pen tool at all, I did use shapes.

Attached Files

•  lifebuoy.png   106.66K   6 downloads

[Shelley]

FullMetalBabe said:

Sorry to ruin the thread, but was I close to making a 'good' lifebuoy or life preserver D;?

X3 I didn't use the pen tool at all, I did use shapes.

That's looking good FMB. :thumbsup:

I'll probably go back to re-designing one today because at some point I'm going to need a life preserver icon and the one i did for the post icons would look so good re-sized up.

[Boss]

Oh F*$%

I wrote an long post and I accidentally clicked back and my post is gone. One major reason why  I hate vBulletin. BTW, the following might not be too coherent because at this hour I barely pay attention to what I type out, especially at the speed I type.

Here we go again.

I'll start doing the design theory tomorrow. I've got this huge grid pad with hundreds of pages I picked up a long time ago. It's for art, supposedly, but I split it into 4 quadrants and make 4 beta designs of what I feel the site should look like. Attached to it by staple is a paper with elements and design styles that speak to me.

I've spent the last week looking at hundreds of designs, both my own from the past and from others around the world. Seeing what they've done and finding a way to deliver it better, and in my own way. The hardest part is really the main interface in the home page, and of course the icons. I want this as unique as possible, and this past week I've been brushing up on vector theory, again. Because I really need to get used to Illustrator again, and because the icons I'm thinking of doing, which I've roughly sketched out, will take lots of layers. I've found a few methods of doing shine and sheen without resorting to raster graphics, and just vector all around. Of all of them, I expect the clock I've sketched out, will take a few good hours to perfect. I work slowly when it comes to graphics, mostly because I have to get into the groove with music. :P

Of course, at work, you should see how I hurry all our employees up. :P Of course, different field, very different.


As for you two, I really appreciate getting solid feedback. Don't be afraid to say something's crappy/shitty. And I see where you two work differently. Shelley used raster stroke to create the circular lines in the middle of the lifesaver, where as FMB (I keep forgetting your name, Neidi, Nadia?) used 0% fill, black/gray stroke, copied, one with outer glow and one with inner glow, correct?

[FullMetalBabe]

:P You can call me Neidi or Neida, and you're almost right. My lines in the buoy are actually triangles(4), redish orange triangles. I positioned them to make a 'cross' like shape and expanded them till where I thought it would be more appropriate(I wanted more redish-orange than white). I applied different effects for each triangle(well the same but I applied them individually) and I also created a layer mask so they would go 'fit' in the circle perfectly. I attached the layers so you could see a bit better what I am talking about.

Attached Files

•  layers.png   39.69K   8 downloads

[Boss]

Oh, I was talking about the circular lines. In between the yellow square squiggles. My one complaint is the creation of squiggly lines, or the rope in this case in Photoshop. With Illustrator you can just draw it out, but with Photoshop you have to create a weighted line then distort it with the pen tool.

Attached Files

•  sample.PNG   105.87K   7 downloads

[FullMetalBabe]

:P AHH, sorry for misunderstanding. It's Layer 1 from my screenshot of layers. The stoke is overlay, white 1px, 17% opacity and the inner a inner shadow 0 distance and 6px size with 6% opacity.

[Boss]

Ah, okay. And the rope was done with just line and stroke converted to vector mask?

[Tech]

Is it just me or do those lines move? When ever i take my eye of it and then back on they appear to move.