Tutorial please

[thatwarriorcatsrp]

I want to make a totally different skin/template for my site thatwarriorcatsrp.proboards.com/. I wanted to know if anyone has an in depth tutorial. Im not talking about basic skins I'm talking about skins like my site, and others like fiveclansfate.proboards.com/ and warriorsforest.proboards.com. I know how to use photoshop I just need a tutorial on how to start from scratch and make a professional looking skin like the ones I mentioned.

[Kami]

So I'm going to be honest with you: what you're looking for doesn't exist.

The reason for this is because learning good, professional design cannot be encompassed in a single tutorial; these skills take years to develop and you won't get them by referencing a tutorial. You can find multiple tutorials for specific goals -- eg: say you want to change the mini profile to look a certain way -- but there is no from start to finish tutorial because that's just so much effort. You likely won't find anyone willing to make one, either -- it's incredibly difficult (as well as subjective) and most people on PB don't have the skill and experience to do so. Those who do have the skill also tend not to have the time.

However, I can provide resources / tips to get you started learning how to do this yourself.

---

1. Make sure you understand the ins & outs of HTML and CSS. If you don't, you're going to find this incredibly difficult to do on your own. w3schools & codeacademy are two excellent resources to learn the appropriate markup.

2. Familiarise yourself with PB's templating system, including the variables, route names, and if/else statements. If you want to make professional looking themes you will, at some point, need to know these.

3. Look up inspiration for contemporary design practices. Minimalistic design and flat UIs are very popular right now, so you should be able to find plenty of examples using those search terms.

4. Make sure you have a mockup in photoshop first. That way you can visualise every component in your theme first -- from the home page (make sure to do a guest, member, and staff member views), to user profile pages, to threads / mini profiles, and so on. I guarantee you that it will be SO much easier to figure out how to do things -- and to ask for help on the specifics -- if you have a pre-made visual representation of what you want things to look like instead of winging it.

As an example, here are some mockups I've done for past themes:
- kamidoodles.tumblr.com/post/104029587285/commissioned-design-for-betboards-not-for-use
^ A commissioned theme; as you can see I mocked up custom pages, the home page, as well as thread list & display

- kamidoodles.tumblr.com/post/67142143933/yay-the-main-page-is-done-i-still-have-to-do-the
^ An old RP theme I did. This one I wanted to share specifically because it's all the "home" page, but in three different views (guest, member, and admin)

- kamidoodles.tumblr.com/post/67227469908/okies-thread-view-subboard-list-sorted-onto
- kamidoodles.tumblr.com/post/67482983243/laughs-bitterly-at-how-the-mp-for-members-looks

^ the thread/subboard list + thread display for the same layout

5. Make sure your design is accessible & responsive.
- Web accessibility: www.w3.org/WAI/intro/accessibility.php
- responsive design: www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

---

I know this isn't quite what you're looking for, but there are no tutorial shortcuts to learning how to make a comprehensive professional theme. Hopefully the above tips will help you start on your way, though!