Layouts

I decided to make a separate page for all the layouts on this site, so as to explain the processes and time involved.

Huge shoutout to Cam who has since helped me recode all my layouts to be neater and redundant code free!

Heels

Let me start off by saying, this layout was ~75% Cam, 25% my work. I originally wanted to recreate a homage to the old geocities/angelfire sites which I use to have so many of, but make it a bit more easier to use and nicer to look at. And this site needed a new layout after months of the Lonely Cloud one (which I admit was littered with messy styling and coding…hehe).

Cam helped me with the graphics as he is fantastic at pixel art, and I am rather pathetic at it. This layout just kind of grew from there though, as we added more layers of functionality and sparkly, moving things to it.

My idea for the layout was to have it as ‘cute’ and pastel-like as possible. I originally thought a candy stripe background would work, but after a few failed attempts at making a layout come together I scrapped that idea and came up with the pale blue polka dot background which I liked a LOT better. After getting a basic layout down, Cam came upwith an ingenious way to vertically center a div layer. And then it snowballed from there.

After the main image links were created, I basically styled the CSS so we could work around it. One thing I’m loving is the support for CSS3. Hovering over links with background, or form fields with borders has never been this much fun! Another thing I’m in love with is the cute social media and music player buttons at the bottom. I knew I wanted to add in a MIDI-esque song to the layout but hadn’t really thought about any particular song until I heard the Buddy Holly lullaby on the Rockabye baby music website. They make the most amazing remixes of contemporary rock songs, and the Buddy Holly one was my fave!

Another thing you may have noticed about the layout is that the blog template is cleaned up to have minimal links and clutter. Paired with the cute page borders, I think the avatar/speechbubble/comment heart is perfect for the layout! I intend to use this layout in future layouts too…I just don’t really know how I’ll style it yet.

This layout might look simple on the outset but it actually uses a lot of javascript and custom php coding courtesy of Cam’s wonderful dedication and helpfulness. The background is actually just static but I wanted to redo the falling snowflake script in a classier less obtrusive way. I think the layout pulls it off really well Together with the scripts for the header rollover, walking kitty and heels rollover AS WELL AS the padding corrections in the div layers and vertical alignment etc. Cam deserves a medal for this layout was a long time coming but we are so happy with it! Sure there are loads we can improve on but that’s for the next layout, which will be even better

Programs Used

• MS Paint
• Adobe Photoshop for the gifs and resizing/colours
• Dreamweaver

Things I love about this layout

---

 Lonely Cloud

This layout started with the kind of idea that stays with you until you get it done.

The kind of idea that makes you stay up til 4am finishing the drawing.

The kind of idea that will be gone FOREVER if you don’t start it immediately.

I’ve always loved the concept of clouds and deserts and open spaces, and I wanted this layout to highlight the endless sky, and the rock solid ground of people and lights below. To be honest, I’m kinda sick of seeing the robot imagery everywhere with the red little heart, but I wanted to do a different take on that familiar theme – a robot who loved: being free, swinging in the clouds, catching glowing starflowers.

And I’m not ashamed to say this layout was also fueled by a lot of tea, gummi bears, instrumental post rock and LINKIN PARK. My in the zone music needs to be as mindless/unobtrusive as possible, and for some reason….listening to either of these things in the background helped me to just do whatever I needed to do.

Drawing the robot was probably the hardest part, though there were elements in the code which also took me a while as I was still learning all the  tags in WordPress. This was the type of drawing that if I didn’t finish it during a specific time, I’d never finish it, and the inspiration/in the zone-ness would be gone by the next day (this has happened with me with a lot of things). Well it got late into the night, and I eventually finished a draft (or so I thought) and went to bed. The next morning, I woke up and pretty much started working on it again, only something felt different, and I hardly made any changes before completing the rest of the layout. Weird how that happens huh?

I wanted to make the balloons individual image links but that all became too hard and messy so I scrapped that.

I was also going to make this a horizontal layout because it just WORKED in theory because the clouds looked better horizontal than vertical, but I decided it got way too messy with the divs and also changing the templates in WordPress (I hate placing div layers next to each other. It makes things so complicated!). I think the city scape at the bottom definitely helps make this layout though because this totally looked like something was missing without it.

I’m also bringing back the lens flare. Yeah. It’s like my trademark now. Next thing you know, I’ll be using Papyrus for an egyptian themed layout. Hah!

One thing I’m really looking forward to is more browser support for APNGs, or animated PNGs. I know Firefox already supports them but other browsers don’t and its kinda annoying.  I don’t know of any programs that make aPNGs either. I wanted to make some of the images in the header animated, but GIFS just don’t cut it with their 256 colours (either that or I’m just a newb at making GIFs).

Programs Used

• Adobe Illustrator and Photoshop for the graphics
• Dreamweaver
• CSS Edit (still waiting for a Windows version of this to come out!!

Things I love about this layout

 New Age

This was only just the second layout of this site, and because Ephereal is mainly to document all my drawings and ramblings, I decided the layouts made from henceforth should 100% be original (asides from the CMS of course)! I’ve always admired designers who 100% use their own work to create something new, and while I don’t think using stock art/brushes is a bad thing (in fact it’s saved me a lot of the time), I’d much rather say ‘I did all that myself’ and feel like I’m NOT lying about it.

I used Illustrator for 99% of this layout- and it all started with the humble horseshoe crab. They are really amazing creatures, and they have survived hundreds of millions of years til now. Through the dinosaurs, the ice age, the world wars- everything!

I wanted the layout to kind of have a mix of new (the cities) and old (the crabs), and of nature vs. ‘civilization’ as we know it. I guess in that sense I wanted it to relate to the content of this site- because a lot of the stuff on here is very old, but there are also still other pieces of work that are yet to come. I want this site to document every change and influence and style in everything I do, and I wanted the layout to reflect that. I wanted it to be glitzy and classy, and very bright and vibrant, but still deeply rooted within the neverending nature of the ocean and land. A lot of it is actually an homage to the horseshoe crab and its sheer surviving power, and whilst this layout might look a bit dated now, who knows I might revisit this theme sometime in the future

Programs Used

• Adobe Illustrator and Photoshop for the graphics
• Dreamweaver
• CSS Edit (still waiting for a Windows version of this to come out!!

Things I love about this layout

---

 

Leave a c♥mment

Name (required)

Mail (will not be published) (required)

Website