Steampunk webdesigning

[Elanor Pam]

I've recently come into contact with the steampunk subculture and fallen in love with it at pretty much first sight. I've long had plans of purchasing a domain to host all my artwork and webcomics, and now I've finally decided I want a steampunkish layout for my collective page. Unfortunately, my lack of contact and experience with the genre limits my vision, and I find my schematics of the layout lacking in something I can't quite point out:



I was inspired by Datamancer's amazing steampunk laptop; the wood feels completely off, though. I tried darkening the whole thing to see if it was the color which was throwing me off, but, though I do like the darker wood better, it seems to be more than that.




I'm thinking about ditching the wood for some sort of dark metallic look, maybe with an old steam locomotive or pocketwatch feel, and that's where I'll need help - some reference pics, or just an explanation about the kind of metal used in such things, suggestions for color, any little detail will be of help.

My intention is to add some cogs/gears on the spaces left by the title, each of them with a pic or a rollover animation inside depicting the destination (either text or a screenshot). The site will be on rudimentary php.

I'm pretty satisfied with the brass details and the title, but I'm accepting criticism on those as well.

[villaintagonist]

Try keeping the dark wood on the border area but changing the middle part to something lighter, this will serve to bring out the frame a bit, and will have the aded benefit of making your content more readable. I would also strongly suggest you go in and clean up the edges of the "brass" because they look a little rough. I'm not sure if it matters to you, but it's not easy to make out your title, perhaps you could bring the text up above the brass so it's more legible, it's definitely cool the way the brass loops around right now, but sometimes you have to sacrifice aesthetics for convenience. Otherwise, I love the layout, and I look foreward to seeing your site!

[Elanor Pam]

It's just an sketch of sorts - I'll probably use vectors when I start making it seriously. For now though, it's rough because I don't want to put too much effort into something I'll probably modify or discard.

I found a nice bakelite texture, and used it on the title and borders. It looks nice so far. As for making the middle part brighter... I actually like lighter text on dark background, and since my sub-sites will probably have black text on white (had to make them simple), I wanted to have this one the opposite way. I see your logic, though; if it doesn't work, I might make it look like parchment in a frame or something.

...that's actually a cool idea, now that I think about it O_o

[Elanor Pam]

I've made some progress on it, so I'm leaving a screenshot here for crit purposes. Feel free to stomp all over it.



I ended up discarding the bakelite texture I mentioned before. It made the title look out of place :/ pity.

[Commander Obadiah]

Ooh, that's very pretty. Great job!

Commander C. Obadiah

[Datamancer]

Thanks! I'm flattered to have been of inspiration to you. My first suggestion (I know you said you're in the "doodle" stage, but..) would be to make all your textures a little "more real". Make the color differences a little sharper in your ribbon fill on the brass and it should make the reflections look a little more authentic. Also, find a better wood texture. You could even find a hi-res graphic of real wood and drop it in on a seperate layer. In the steampunk aesthetic, it's the flaws that are almost as important as the design. Things like knots in the wood and smudges in the brass will only help the design. The toplogo is a little muddled too. You might want to either use a thicker font or lay it on a "plate" or some kind of background element to make it pop. The title logo is the most important identifying design element and should really "pop".

Having said all that, I think my own site really needs a redesign. I made most of it on a really old, very dark, very blurry monitor. When I finally upgraded to a newer, clearer one I found so many ugly flaws in the design that I never noticed before (like the ugly toplogo graphic).

-~D~-

[akumabito]

smudges in the brass

Greasy fingerprint FTW!

[Keithe]

I found some good photos of wood textures here http://www.2easy4woodfinishing.com/which%20wood.htm. One is my current desktop.

I would echo the other comments about making the brass a bit more realistic. Otherwise it looks good.
A few rivets could also be added for texture in spots.

Where did you find the bakelite texture?

[CapnHarlock]

I have found that "Drop-Shadow" is your friend  for adding depth to "metalwork"

On an opposite-but-related note, as a web-geek, I must still recommend using "real" text, and minimizing text-in-graphics, as much as humanly possible.  You may well lose out on "pretty" font-faces, but the search engine spiders, and anyone using a screen-reader (i.e. many visually-impaired folks), and anyone using a language-translation service,  will thank you.  For all of this whole class of users, a picture of a word is not a word (even with an 'alt' tag).

[Smaggers]

That's a very pretty thing.

You might consider pulling the tones or colours of the brass and lettering slightly further apart to make the title a bit more readable, or pulling the text in front of the brasswork. It stutters the eye a bit as it is at the moment.

[Otto Von Pifka]

I agree with the text to the foreground on the brass. perhaps tiny rivet heads on the lettering too?

the F and the N might look better if they overlap the heavier brass flats they're next to now.

otherwise, It's looking great!

how about a gaudy gemstone in the opening of the bottom brass? or a cut glass/stained glass filler? something that says "victorian excess"

[Elanor Pam]

Oh my! For some reason I received no reply notifications in this topic... I read it all just now! Such great suggestions.

I ended up scrapping most of my previous work in favor of a reddish look. I tried to make it look velvety, but failed :/ Here it is so far:



I like the idea of smudges on the brass linings, but I'll have to be careful with the middle part, where the text'll be; that part will have to be background-patterned to allow for longer texts, so I can't have too many flights of fancy on it.

I also appreciated the idea of adding a jewel; having landed straight from mediaeval fantasy land, my first impulse is always to add magical jewels everywhere - I didn't think I was allowed to do that in steampunk as well! Makes me happy

As for the bakelite texture: it was in a site among brassgoggles' link page... I think it was a site for selling and trading steampunkish objects. There was a nicely-sized pic of a bakelite radio, and I just had to copy a square part of its bakelite shell, mirror it horizontally and vertically and there I had a usable pattern! It didn't make it to this version, though.

Edit: I started to redo the brass linings for the final version - here's how they're looking:



I think it's going much better than the try version. This layout doesn't seem to require a box for the text, either; I could do away with it and go for a wine velvet+brass linings look. That text box was really bothering me. I also added a couple of gems.

[Toji Chiba]

I feel SO inspired! Thank you so much, sir.
Great Artwork so far, I hope to achieve similar results.

regards

Toji

[Commander Obadiah]

Capital work Elanor, your filigree is astounding. I want to do an etched filigree on a laptop computer my father is rebuilding, but I'm afraid I just can't seem to create one on the computer. I respect your skill!

Commander C. Obadiah

[Elanor Pam]

If you would like to use or inspire yourself in one of my designs, feel free! Having a tablet does help wonders. Most of the layout required just drawing one side and mirroring, so it required less skill than it did basic photoshop knowledge.

[Toji Chiba]

Here's what i came up with:

brassgoggles

have no use for it, but I just had to try.

Toji

[Elanor Pam]

*____* Those gears, where are they from? Did you draw them yourselves? Do you have a resource? Gears are such an ass to draw, at least for me...

The fingerprints are a nice touch, but the stone/glass texture behind the title attracts too much attention and is kind of unpleasant to the eyes... maybe a smooth surface with a barely visible pattern would look better?

[Toji Chiba]

*____* Those gears, where are they from? Did you draw them yourselves? Do you have a resource? Gears are such an ass to draw, at least for me...

The fingerprints are a nice touch, but the stone/glass texture behind the title attracts too much attention and is kind of unpleasant to the eyes... maybe a smooth surface with a barely visible pattern would look better?

that's leather I'll see what i can do.

I used a stockpicture for the gears klick and created brushes from them to make them more useful. Very easy though.

Toji

[Atterton]

I think a nice website could be done using the colours and lines from old steam locomotives. HAC has posted some good pictures earlier which could be an inspiration.

[MadmanMachine]

I created this background for my personal artsite.

I'd be happy to work with anyone who'd like to use my talents.

[akumabito]

http://www.burorenkema.nl <-- I like the header on this site..

[Augustus Dayafter]

http://www.burorenkema.nl <-- I like the header on this site..

That is quite nice. I like the pigeon too

[CapnHarlock]

A LOT more graphics than I usually consider using, but here is a first real hack at a Steamy Wordpress theme:
http://www.capnharlock.com

Please note: almost no content yet, except for first part of the HowTo

[Gazongola]

If it were me, in that middle bit, I would have some William Morris wallpaper...

[Gazongola]

Oh and does anyone know how to make an image into a vector on photoshop?