Horizontal website art creation

After I changed my plan for the horizontal website and decided that I want to try to make something like shelfs with items, I wanted to make w a few jars since I’ve always liked drawings of jars, why I don’t really know but I find them cute and I thought they would work with the theme of the webpage.

The first one I made was this is one. And I decided to fill it with candy because jars with candy are amazing, no other reason really. Jars with candy make me feel good so that’s why I made it. I played a bit with the layer’s opacity so that I could make it look like it’s sort of behind a glass. I also added a darker background behind the candy so that it would look a bit better.


This is a jar of candy that I found in a shop. Doesn’t looking at it just make you feel better? Even though I have no idea what that candy inside is.


jar copy

Then I coloured it in only two colours, the ones I used for the vertical page and wanted to use it there before I added the parallax scrolling. I had it starting to scroll down from the top of the page at the different speed than the rest of the objects on the page and it added a nice effect to it. But after I added the parallax scrolling, it got overcrowded and I didn’t like it.

I also like candles so I tried to make some. This is what came out. The decorations on them are all done in Illustartor as well as the candles themselves. I just changed their colours and moved the decorations a bit so they would look slightly different or people might just think that it’s just the colours are different but you’re looking at them from different angles. The flames look kind of weird I think but I like them.

This slideshow requires JavaScript.

This is my sort of inspiration for the candles, I can’t believe I actually got the colour orange pretty accurately from the actual candle I saw in the store, I wasn’t even aiming for that

This slideshow requires JavaScript.

I also saw a little barrow and really liked how it looked though I didn’t really put much into mine, is just looks weird to me

This slideshow requires JavaScript.

And these are the little jars that I made so I don’t only have big ones. I filled them with something that to most might look like juice or something but we have something traditional that we make that you can’t find in the UK, it’s something like marmalade or jam but not completely, it’s actually very different in taste. My parents didn’t really have much problem with looking at the jars and what’s in them so maybe it’s just a cultural difference thing.

There’s some ‘glass refelction’ that I tried to ass so it doesn’t look too flat, hope it worked.

This slideshow requires JavaScript.

And here’s the background. It’s very hard when designing a horizontal website. With the other idea I had, I could have everything fade out to white as the site I found and showed at the midcrit but with this one I found it harder. I thought that fading it to black would be better for that since the background is darker and I thought black would make it even worse and I didn’t like that. I also have to be careful with the screen size and resolution. When I was presenting the resolution of my screen was different than what it normally is so you could see two rows and a bit of the third but when you view it normally on my laptop you just see two because that’s how I’ve designed it, it fits exactly two. So I decided to leave the rest of the image an image and not just fade it to a colour. I left those ‘shelfs’ empty though because you wouldn’t really see much of them since you’ll need to preview the site on a large TV screen for it stretch that much and I didn’t want to make the already slow loading site even harder to load.

This slideshow requires JavaScript.

The last one of these was supposed to be like a door that I wanted to have opening but I couldn’t really work out the scroll effects to do that. It just got really messy and it got even messier when I was playing more with the settings. I also wanted to make the last ‘page’ the contacts one a bit different originally. I managed to do part of it when I first tried but I couldn’t when I made the final design for some reason. I wanted the last segment to scroll vertically so that to the viewer would seem like their eyes have moved ‘down’ the cupboard. There I wanted to have another door that would slide open and you would see the contacts but as I said that turned out to be a bit too challenging and difficult. I’m not even entirely sure you can do it since I haven’t seen something like that.

Another thing about the background. I had sort of trouble making it. I made it in photoshop but when it came to make it look like it has a bit of depth it was hard for me. I have done that before but it was weirder now, I just kept thinking how much easier I could do it in After Effects. I was even in a call with my parents and I share my screen with my dad so I could ask him for a few hints. He works a lot with 3D but in a slightly different way so his vocabulary was a bit too professional when talking about all the planes and everything and I’m also really bad with directions anyway and when making it 3D you add even more points and directions and you have what you would call ‘closer’ and ‘farther’ objects to consider, but we worked it out. I felt better with him guiding me but I also got him surprised with how much I actually knew which made me feel happy. As I also said this was not really hard at all, I guess I just got used to doing it more easily in After Effects so I needed someone to also look at it and tell me if it looks weird and wrong to them since I couldn’t really tell. But yeah, I got a bit of a push for making a shelf from my dad.

My inspiration for this came from  the Harry Potter sites, I used to be a bit fan so that’s what popped into my mind suddenly and I wanted to try it.

Some of the sites are now gone since they used to update them for every movie and there were some that were active only for some time and I can’t find them now but pottermore sort of still has that look.


Вашият коментар

Попълнете полетата по-долу или кликнете върху икона, за да влезете:

WordPress.com лого

You are commenting using your WordPress.com account. Log Out /  Промяна )

Google+ photo

You are commenting using your Google+ account. Log Out /  Промяна )

Twitter picture

You are commenting using your Twitter account. Log Out /  Промяна )

Facebook photo

You are commenting using your Facebook account. Log Out /  Промяна )


Connecting to %s