Vector workshop

This week in our lesson we were taught about vector imaging. A vector image is almost a direct opposite of a raster; it is easy to duplicate and recreate, you can draw free hand images, whole interfaces can be produced with a vector, it is smooth, flat and silhouettes work well. However photographs often do not work well as vectors, this is because they have pixels, which are separate blocks of colour and therefore their edges are hard and often sharp. Another selling point is that the resolution is irrelevant – there are no pixels – therefore resizing of the image is extremely easy and pixilation does not occur. Whereas with raster’s, the image will pixilate when you expand it bigger than it’s given resolution.

Vector vs. Raster

It is because of this lack of pixilation that makes vectors so great for web design, publications, interfaces and other media.

Vectors graphics are comprised of paths which have a defined start and end point, they also have curves, points and angles along the way. These are all adjustable after they have been set – unlike rasters which are not usually adjustable after placement.

This week we learnt how to create a vector in Adobe Illustrator CS6: the task was to create an octopus from scratch. We were taught how to use shapes and objects to create it, however, I wanted to try something a little different and draw the main outlines for myself using the brush tool. This made things slightly harder but I feel like it gave a better result than it would have done had I made the generic octopus that a few of the class created. It did seem to take a lot longer to make it look right though and it was really quite challenging, but I learnt a great deal! The only main problem I did have was drawing the mouth of octopus symmetrically, as you can see it didn’t turn out as expected.

Image

It was my first time using Illustrator, so it came as quite a shock as it is so diversely different compared to my native editing program – Photoshop. Nonetheless, using Illustrator definitely made me feel a lot more confident in myself and made me want to create some more vector based graphics.

I then moved on to using an image of terminator and a robot and converting those into vectors. I used these two images because they partly relate to my project looking at cyborgs. For the colour conversion process I highlighted the image with the black arrow and clicked on the drop down box next to “Image Trace”. I then clicked on “6 colours” – unsurprisingly this converts the image to a 6-colour vector, losing a lot of detail but making it unlimitedly scalable.

Image

Bibliography:

– Image 1: http://vector-conversions.com/vectorizing/raster_vs_vector.html

– Image 2: http://upload.wikimedia.org/wikipedia/commons/c/cd/Sony_Qrio_Robot_2.png

– Image 3: http://www.sunderedepoch.org/unofficial/Terminator/terminator.jpg

Logo Design workshop

This week we were set the challenge to create our own logos for our up coming project.

I opened up Photoshop and set up a canvas size of 1024 x 680 pixels. I then went through the fonts to see if there was that was relevant. I only found one that I really liked, so I used this for most of my logo designs, but I had a look on dafont.com for some more and I found one I really like.

As I was at university when I did the designs (they don’t let you download fonts) I had to type in the text I wanted at the top of dafont and then search that way, taking screenshots of the fonts I liked.

I have included a selection of the logos I created.

Screen shot 2013-12-13 at 14.12.52

Screen shot 2013-12-13 at 14.12.57Screen shot 2013-12-13 at 14.13.08

These two logos (below) are probably my favourite two, both very simple but really quite effective and I think they are memorable too. The logo on the left is also easy to make black and white (as you can see from the one on the right, although its not exactly the same).

Screen shot 2013-12-13 at 14.13.34  Screen shot 2013-12-13 at 14.13.39

Screen shot 2013-12-13 at 14.13.27Screen shot 2013-12-13 at 14.13.47

This logo below is also another I really like; even more simple than the other two I like but easy to remember and the forward slash in the middle creates a lovely divide between the two, referring back to my project idea of splitting the two things up rather than merging them.

Screen shot 2013-12-13 at 14.13.44

Textures

A texture is usually a simple pattern, gradient, shadow or surface that helps give a distinctive appearance to something. For example a texture could be a photograph of a brick wall, patterned wallpaper or any surface that has a consistency and/or feel to it.

A texture can be used to make a publication more interesting, to evoke a feeling upon someone, to add depth and make something look 3D, to create brushes for Photoshop and other graphic design programs and to make patterns.

I think textures are a great way to make an image stand out or to make it look surreal and different. I have never really used textures before for my images but they can be used to overlay on top of an image to give it a certain feeling. However, I will not being doing this as it does not go with my project idea, but I will use them when designing my interfaces.

I have created a mood board of textures I like, that I feel go quite well with my brand image and will work well when creating either a vector based interface or texture based interface.

textures

Image Bibliography:

Enchantedgal Stock, GrungeTextures, Rawrdis, Artlibre, Skipgo, i.imgur.com/6OAsKfI.png, http://www.sxc.hu/photo/1173942, Wojtar Stock, Dori Stock, In The Name Stock

Web 2.0 – What is it?

There are many different defininitions of what Web 2.0 actually is, however, it is basically the second stage of the internet (hence the name). Often characterized by the metamorphasis from static based webpages to dynamic and/or user generated, open source content and the growth of social networking. It promotes the idea of an online, interactive community and invites the idea of user contribution.  Web v.1 is often classed as a very passive, uninteractive and static.

Examples of Web 2.0 based websites are: WordPress and other blogs, Facebook, LinkedIn, Twitter, video sharing sites, and Pinterest.

I found an image online that I feel simply sums up what Web 2.0 is compared to Web 1.0:

Web 1.0 vs. Web 2.0

Basically is it a lot more organised, simplified and user based community.

Facebook

To make a successful Web 2.0 page I think it should include the following:

1. Centralised layout

2. Simplicity

3. Easy navigation

4. Strong colours

5. Gradients

6. Icons, Badges

7. Big bold colours

8. Bold introductions/big text

9. Rounded edges

10. Sans Serif types

I’m not saying this is everything a website should include but I feel these are most the most important things for a memorable website.

Image Bibliography:

1 – lauradrazek.wordpress.com

2 – Facebook.com

Photoshop Wireframing designs

This is a follow on post from the previous post but this time I am doing some mock-up layouts in Photoshop, instead of drawing them. I did this because it looks a little less messy than my drawings, and helps me to get a bit of a feel for what it might be like when I actually design my interface.

To start with I opened up Photoshop and created a new document with the dimensions of 1042 x 680 pixels, in RGB colour, 8 Bit. This would be the outline for my homepage, in which I will add different sections of the website using the rectangle tool and the rounded rectangle tool. I chose all the colour blocks to be one colour – green. By setting one block colour for all the add-ins it meant the different sections of the website stood out from the white background.

S

Here is the final design I created from the in-process screenshot above. I quite like this layout, it is very simple and is quite centralised.

Layout 1

I decided to create a second Wireframe with a different image layout, I think I prefer the first one over this. This layout is more complex and goes for more of a vertical look than a horizontal look.

Layout 3

Finally, I created another layout; this one was quite similar to one of the drawings I did, with the hero image filling the whole webpage and the other buttons and logo etc. quite small so the image is the most predominant part.

Layout 2

Vector Banner

This week we learnt about how to create a banner for a website using a vector in Illustrator. Illustrator seems like quite a complex program with lots of interesting features, especially for graphic design. 

We were given a listen of names of fake brands that we could create a banner for so I chose ‘Camera Collectables’. I took a picture of an old style large format camera and pasted it into Illustrator, I then highlighted it using the white mouse button and selected ‘6 colour’ vector conversion in the drop down box called ‘Image Trace’ which is on the bar at the top. Following that I changed the colours of the camera by highlighting the camera itself and then going Edit > Edit Colours > Recolour Artwork, I then chose a set of colours that would go quite well together and also give off the feel of a vintage camera.

I went through the fonts in Illustrator and decided they were not adequate for what I was doing, so I went online to dafont.com and found this retro font. As I was at university when I created this they would not let me download it however, so I had to type in what I wanted it to say and screenshot what it gave me. I then pasted it in Illustrator, removed the white areas using the Magic Wand tool and changed the colours of the font. 

I then put it all inside this rounded-edge rectangle and filled that in with a similar colour to my original colour scheme.

Untitled-2

First Wireframing designs

I started off by drawing a spider diagram including all of the things I thought a creative’s website would need on it. It may not include everything and every detail but it is a basic layout of what pages the website needs to include and how it will work. There are a list of what I think are essential areas needed on a website for a creative and those are: gallery, biography, contact page and social media links, a footer including my copyright information and year of creation and finally my logo and branding.

SpiderDiagram - Web layout

After doing this it gave me a little more direction and I could then move on to designing my own home page layout for my website. I put together a couple of drawings of possible home page layouts, making sure to differentiate between the two. My favourite is the second layout as it is slightly different to what you may call a ‘standard’ webpage layout (it’s also a bit neater!).

Template drawing 2

Template drawing 1

Wireframing Templates

In this blog post I will include a couple of templates that are standard templates used when designing a website. They are quite basic and simple but can be extremely effective if carried out efficiently. I will be using these as basic ideas for my website, however I do not wish to copy them, but I do plan on taking certain elements from each when designing my web interfaces. In the next blog post I will post a few pictures of wireframing designs I am going to draw out and hopefully a spider diagram displaying the layout of a generalised website for a creative.

Basic template 1  - phil

Basic template 2 - phil

Wireframing templates designed by Phil Jackson