Interested in getting input from developers and or coders.

Im interested in making my own skin. I know photoshop for design purposes. but for slicing and using for vb never really proficient in that area. Suggestions on bets way to go about slicing coding a photoshop layout, and using for Vbulletin.

Also whats the best browser to view as you go to make sure the graphics are present and working where you want them to., and if using example FF, will you problems with IE or Opera browsers. Any suggestions?

Thanks Lionheart

When creating and slicing a design in Photoshop, the most important thing to remember is to keep it as simple as possible. Don't be sloppy with your slices. An image that is cut up willy-nilly results in unnecessarily clunky and bloated HTML and/or CSS code to make it look right. You want to keep the slices down to as few as possible, and have the dimensions on each slice match and line up where possible.

Moving the code over to your forum can be tricky, and every skin is different. The design dictates which templates you'll be doing the most work on, but the three most heavily modified templates in any skin are generally the header, navbar and footer. Naturally, a lot of tweaks can be done to other templates, but these are the big three when it comes to making large changes to you theme, along with the CSS settings in the Style Manager.

One of the tricker things about coding vBulletin skins is that tags inserted in one template are often closed in another. For instance, a lot of my themes have a div which starts in the header, but is closed in the footer. This can make the coding process somewhat laborious—especially when attempting to debug layout problems among various browsers. That said, vBulletin contains the most robust and user friendly style modification system of any of the other forum solutions I've tried, so it can certainly be a lot worse. There were times I nearly pulled all my hair out when making themes for SMF forums, as the php, html and css code are all thrown together in the same files...and very large files at that, with hundreds of lines of code.

Speaking of opening and closing tags, pay special attention to the spacer_open and space_close templates and conditionals. Generally speaking, you'll want tags to either bookend these conditionals or be contained completely inside of them. When I first started making themes, I'd often have a starting tag begin after the $spacer_open conditional, and close after the $spacer_close or vice versa. This resulted in the theme breaking horribly on certain pages, and it took a huge amount of trial and error on my part to figure out why. If you have a skin that looks fine on some pages but completely borked on others, these templates along with your tag placement relative to them is one of the first places you'll want to look when debugging.

I don't want to speak too much for other designers, but I believe most do their initial design and testing using Firefox, as this is the most standards-compliant browser. Once you have a theme looking good with it, then begin testing your theme in IE, Opera, etc. Also, make very liberal use of The W3C Markup Validation Service. A few errors in your markup generally isn't fatal, but you really want to try and get your skin to validate, for browser compatibility reasons as well as making things easier on the search engine spiders. Sadly, a lot of the developers of existing vBulletin modifications pay little attention to this, so even a skin which validates perfectly alone can throw a half-a-million validatoin errors after installing certain plugins/modifications, but I guess that's another topic.

Oh yeah, don't completely rely on the Photoshop generated HTML code when saving your sliced image. This can generally be a good starting point, but don't try to paste this code verbatim into your vBulletin templates. Myself, I prefer to use divs and CSS where possible, and not the crap tables, TRs, TDs and spacer gifs that the Photoshop code presents me with.

Ah...damn...didn't mean to write a book, but I got to typing and couldn't stop myself. If I didn't need to pee so bad, I'd probably still be typing. :cross-eye

Well, as far as your last comment, its REALLY best to make sure you skin is good to go in ALL browsers. Because something may look out of place in FF but not in IE or vice versa.

Excellent information that anyone new to styling vbulletin should adopt. More often than not the code photoshop generates will (99% of the time) need alterated. I know when I designed my usergroup legend with multiple rollovers and 70+ slices the code needed modifying extensively for it to work properly, so slicing and dicing with photoshop can be a straight forward affair but more often than not things can look ugly and images breaking so more work will be needed to the vbulletin templates iis always a certainty.

I will style using forefox but I always switch to IE just to make sure nothing is broken and it's always good policy to check regularly in IE or firefox if your default browser of choice is firefox to check for breakage.

Nothing more to add really and goodluck with your new style.

__________________
vBImageworks.com - Free premade custom Vbulletin Emoticon Sets, Button Sets, Ranks and more...
My Blog

I should have called the $spacer_open and $spacer_close variables, not conditionals, for whatever difference that makes. lol

Only one more thing I should have mentioned is to optimize your images. I try to keep my JPEG images' quality settings between 50 and 70, the image depending. Images with smaller dimensions can generally have a higher quality setting, assuming you don't have a lot of these images as their collective larger file size can add up. Some images can have a quality as low as 10 and 20 and still look okay, if it's a generic texture or what have you. Let your eye be the judge.

As an aside, JPEG images with a lot of red in them seem to hate any quality settings lower than 80. The compression artifacts really show up on the red parts, making it look like crap. Anyone else notice this? Have you, Shelley? Ah well, I digress...

Regardless, what I'm saying is, keep the image's file size down to as little as possible. I've seen some websites where the webmaster didn't bother to compress his or her images, resulting in images with even modest dimensions having huge file sizes. Obviously, this is a pain for dial up users (yes, they still exist!) and unnecessarily eats up your own bandwidth. It goes without saying—though I'm going to say it anyway—that you should never use bitmaps (I've seen people use bitmaps for logos and other graphics that were well over 2MB in size :confused.

Remember, when exporting your slices, you have to click on each individual slice in the "Save For Web" dialogue to manage each slice's format, quality settings, etc.

Okay, I'm done. :p

Prominant reds usually have a strange effect but I try to combat this by shading it into many variations of red. I have to admit, because I always style for myself I break pratically every rule in the book by not optimizing slices the way I should. For example, I have a 4 part logo with the left side fixed a repeating slice and two fixed slices on the right. The left fixed slice is jpeg (which warrants the jepeg format) because of the colours exceeding 256 colours though the rest of the slices are also jpeg at a 100% when they don't actually warrant this kind of extreme setting. I did allocate the formats to both jpeg and gif but changed it all to jpeg. :confused:

I'm prity good for giving advice to people on optimizing images though i'll ignore every rule in the book because I don't put a 100% effort in my online work (with regards to styling) because it's for me (my own site).

Had I designed something for a client that would be another story.

As a rule, logos is an area I usually tend to get sloppy with regards to format. When it comes to the rest of the forum graphics that's another story and I optimize the images better but because my online work is only a hobby I don't put a 100% effort into it because people are generally happy with what I release. Who am i to argue with that? ;)

Anyway, You make some very good points yet again smashingyoungman and I would always encourage anyone reading to adopt these tips. Like i said, you make some excellent styles and this kind of passion shows in your work. Maybe one day, I'll get my head together and try to adopt my own advice but I hate styling and I tend to get lazy whilst styling.

Why am I telling everyone this? ;)

Thank you both, and found the advice both informative and intelligent. Looking forward to see how lazy i get in the future for optimization.

Cheers Lionheart

For PC's yes, but for Macs that would be Safari 2.0. Safari is even more compliant than FF. We always code to Safari, re-check in FF, and then lastly check in IE

__________________

Colonel Ingus - N.A.P.P Member   
Vbulletin Coding Guru / vBHackers.com
vBSEO 3.1 GOLD Released vB Blogs Compatible | Non-Encrypted | Branding Removal Option | Sitemaps 2.1 | Language Packs

Crawlability Network: vBulletin SEO | vBulletin Hackers

wow can we say nerds lol. nice descriptive info though. my suggestion is go ahead and open the auctual default images in photoshop and use the size of those images and put your custom image over it.. thats just for starts tho like for the headers etc.

True I can say i'm pretty nerdy when it comes to bring them together. Photoshop and coding to vb. I didnt see that as a problem trying to advance my knowledge. As for using the default style and then just changing the hex color is simple and creating new buttons too are simple. I wanted to gain more knowledge in regards to creating an entire layout then slicing and coding. Much Like your skin Likenota.