Mountains Design

Today I continued working on my mountain background image. Although I’m not 100% happy with the outcome I think they look better than previously, I have tried a series of different strategies and if I had more time I would probably start them again and try more. I tried to use a series of different brushes in Photoshop to get the snow look realistic but it was quite tedious. What I would have liked to have done in retrospect is make them look a bit more 3 dimensional, maybe have two sides and try shading one of the sides. However I think the outcome is sufficient.

mountains

My Designs update

Today I worked on my background designs some more, I tried different methods to create some mountains in both Photoshop and Illustrator.

snowmountains

I tried a series of different techniques to try and make the mountains look more realistic, using darker shades for mountains further in the background and also introducing some snow using the brush tool and also creating some lines (on the left side) to try and make the mountain look more rigid.

realmountains

I tried to use a photo of some mountains as a template but this didn’t work very well.

mountains

In my Photoshop designs I wanted to make the mountains look more realistic and with the Illustrator designs they look more cartoonish (I personally find they have a sort of Hanna Barbera feel to them). In Illustrator I used the pen tool as opposed to the brush tool in photoshop, which makes the lines more precise. I quite like the snowy tops but I also find they look a bit bland compared to the other design.

Screen Shot 2015-01-24 at 19.38.59

these are the outlines of the design, I filled them with colour in photoshop afterwards as I prefer using photoshop for that as it’s less tedious.. In order to change the shape of the mountains I havd to add anchor points to the lines.

Processing Images 2

In a previous post I showed some images which I will be using for the project, I have since made some revisions and added some things to the designs.

In the image below I have added some mountains and trees and to the background to give it more of a natural landscape, my idea is that the buildings will appear in front of the mountains and the trees will somehow be replaced by the houses and the road. I like this better than previously because it means that instead of there being nothing when there are not many people occupying the space there will be some natural scenery and the screen will be less bare than previously. I have also added some clouds which I intend to have moving across the screen and I also want to add a sun which moves slowly throughout the day, I think this will add something extra to the idea because it will make it less static and more interesting.

pretown

Below shows what I would like the screen to look like when the project is complete. I need to work out a way to make the images transform to this. A way I thought this could work is to have the colour of the ‘grass’ change colour depending on if a pixel is changing in colour when there is movement. I also thought I may be able to have the clouds change from white to a more greyish colour to reflect the pollution that a city creates. I have thought about having some cars moving across the road depending on the amount of pixels which are changing in colour effects how many cars there are. Some of these ideas may be unrealistic considering the amount of time I have but I would like to create a busy environment to reflect a busy city, because otherwise it might be harder for the audience to understand the meaning which I am trying to put across.

fulltowngrey

Designs for Project

Here are the first designs for my processing project.

The first picture shows what I intend the project to look like when there are no people around to for the pixels to change in colour value.

notown

When people start to walk into the view of the camera this buildings will start to appear depending on the amount of pixels which are changing in colour.

littletown

When there is a lot of movement more buildings will appear on the screen which represents the environment changing with the addition of more people in the area.

bigtown

My next step is to test the project in processing and get the buildings to appear on the screen depending if a pixel is colour is changing in value.

I created the skyscrapers in photoshop and just used simple rectangle shapes to create the buildings, then used rectangles to create the windows and copy and pasted them to make a single row, then merged those layers and then copy and pasted them again until the windows covered the entire rectangle. I used a similar method to create the houses and the road.

Channel Project Update

For the Channel Project our groups objective is to come up with a website that contains episodic ‘webisodes’ of a futuristic related subject. The main aspects of the brief are to create a brand that has fictional and futuristic elements. My role within the team is director and camera operator and my main focus within the group is to oversee that everything in the video and ideation process comes together accordingly. Originally the idea we went for was related to teleportation. A story was developed by the group about a man who has a glitch in his ‘teleportation watch’ and randomly teleports to places that he doesn’t want/mean to teleport to. The narrative had a humorous tone and would have been in the format of a spoof news report or infomercial.

After developing this idea the group came to the conclusion that there were complications that were hard to work around. I felt that although the initial idea was entertaining and also interesting it didn’t fit entirely to the brief and was too hard to film and script/act in the time period which we were given.

For the original idea the name glitch was decided upon for branding. The group worked on some designs, which were used in the original presentation. And these are designs that I made for the initial teleportation idea.

GlitchWatch               glitch

After getting together and discussing how to move forward, we decided to change our idea altogether and steer towards something which was less entertaining and more informative. Our new idea was to make advertisements for a fictional ‘planetary commission’ whose goal is to recruit citizens of earth to emigrate to a new, fresher planet with a less damaged, cleaner eco system. The footage contains landscape shots of Earth, which will be presented in the webisodes as natural features of a new planet called ‘Alpha Centauri’, which is the name of the company. The webisodes will also contain shots of not such lush locations on earth that are meant to show a deteriorated earth which is becoming uninhabitable due to environmental issues such as pollution and global warming etc. The channel website is going to be designed to mimic a travel agency.

Although the original plan wasn’t to address environmental issues I think it unintentionally does. However, we are focusing more on the science-fictional aspect of deep space travel and new habitable planets.

Although I liked the original story I think this idea fits better towards the brief, is more design orientated, and is a lot easier to create in terms of ideation, workload, and branding. The downside of this idea is it relies quite heavily on good weather for the concept to be clear.

Although it might seem that time was wasted on changing the idea it shows that sometimes ideas don’t work even if they have promise, and that planning is an important part of the process in achieving a well thought out final product. It was not necessarily easy for the group to suggest changing the idea, as I believe people didn’t want others to feel as if they were overruling the group’s decision. But in retrospect, after discussing the issue, the majority agreed that it was a step in the right direction in regards to coming up with a solid idea that matched the aims in the brief.

Portfolio Website

Header of portfolio website

header

The Header of my website contains the main logo of the site, which I created in photoshop, using a custom typeface which I also used for the splash page menu. I added the bevel and emboss effect and a gradient overlay to give it a metallic look. I like the blue tint and it fits in well with the space themed background and the overall design of the page.

Jquery roundabout

jquery roundabout

I used this jquery roundabout to section off different categories from one another. I feel that this is effective because it doesn’t group all of my work together and each section focuses on a specific aspect of design. I didn’t like the idea of having all of my designs on one page and the user having to scroll down the page to see different categories, so I created a separate page for each category and used the images in the roundabout as links. The download of the plugin contained css and javascript documents which I had to connect to in html in the head section. I customized the css and javascript pages to make the plugin fit into the ‘mainbody’ div in html. Elements I customised in css were the size of the images and the space in width and the amount of space they had in between one another, I also changed the opacity of the image in the background so it didn’t interfere with the image in the foreground. I had to alter the css until all the images were level with one another, this did take some time to make the plugin look right. In javascript I changed the ’tilt’ which altered the way in which the images moved, I also enabled the images to change automatically instead of having to click on the left or right images to make the roundabout move.

In the future I would like to write my own javascript code from scratch but this gave me a better understanding of what javascript and css can do and how they work together and what someone can do with jquery. This has helped me to come up with ideas that I would like to work on in the future, and has given me a better understanding of css javascript and jquery.

Portfolio Website

My portfolio site is quite a basic design, I wanted the site to be easy to navigate and not overcrowded with information. I also wanted to make sure that each page was consistent design-wise. This is why the links in the header are green, blue, red and yellow, because this fits in with my splash page where I re-created the Simon game on photoshop and used the coloured sections as links. The colours I chose are mainly grey and black for the background. The website is also space themed with a background of Earth on the splash page and stars and a comet behind the ‘Luke Monet Designs’ Logo which I also created in Photoshop. Although I personally like the design it is quite dark and this doesn’t really fit in with the modern standard of design where white is the preferred background colour.

Since starting this project i have learnt many new skills, especially in css. I have also got a better understanding to how websites work as a whole. ultimately this has made me do things differently to previous website building attempts. One of the things I have learnt to do much more efficiently is to make sure to leave notes in my code in my html and css. This is so I can understand what I have done if I want to change the website at a later date. I have also organised my folders better and instead of making css pages for each html page, which I did previously, I have one style page for the entire site which makes it easier to work with and edit.

Looking back on the website there were things I could have done better. My design has a very outdated look to it and I could have made it more modern. For example, instead of using overflow on some of my pages which made a scroll bar appear in the div I could have came up with a more interesting way of showing the examples, as overflow is slightly boring.

However, the reason my design has an outdated look is also because I wanted it to have a retro feel to it. As it was my own personal portfolio and that’s the sort of design that I personally like it seemed that the portfolio was reflecting my taste in design. I concentrated on this too much though and it would have been better if the site showed more of what I can offer as a web designer and less of what my personal tastes are. It would have been better if I had found a middle ground where although the website kept an aspect of individuality it also showed that it was up to a standard that most clients would require.

What I like about the website is it’s easy to navigate. This is because I kept it small and didn’t add too many links so it’s very easy for a user to find the information they need. When creating the design I decided that I would only need four links and my splash page is built around that. This might have been a problem if I wanted to grow the site because it would mean I’d have to change the design to fit more links in on the splash page, though it seemed that as it wasn’t a site that would need to be larger, it would work for this project.