Tag Archives: Images

Using the svBuilder

April 18, 2012 Graphics blogger Leave a comment

I clicked on New Gallery.

I dragged the three cloud files on to the ‘Add Images’ space and they appeared on the right. I changed the caption of the files to a different name which would be seen by the viewer.

Size of webpage, image source and image sizes are the other options that can be changed here.

I clicked the ‘Customise’ button. The options on the left appeared. I changed the text colour to purple. I clicked ‘Publish’.

Gallery height, gallery width, background colour, text colour, frame colour, frame width as well as the title of the gallery can be edited. The layout of the page can also be edited.

I clicked save.

Here you can see the changes I made.

http://www.simpleviewer.net/simpleviewer/support/svbuilder/

Website Design

First class using SimpleViewer

April 16, 2012 Graphics blogger Leave a comment

html – hyper text mark up language – the elements from which a webpage is built

CSS – Cascading Style Sheets

XML – Extensible mark up language

Audience – students, designers or possible employers.

Index – home page.

Gallery – style

Images – my final pieces

Thumbs – thumbnails

FTP– File Transfer Protocol – Network protocol to transfer files from one host to another.

34sp.com – to buy a domain – cheap – £3.99 a month – one click service for WordPress.

Root folder – where all the files are saved.

Open Source software – Code that is accessible and can be edited by anyone.

Here is the website where I downloaded SimpleViewer. The website tells me that ‘SimpleViewer is a free, customizable image viewing application. Lightweight and easy to use, it features smart preloading, a resizable interface, thumbnail menu and optional description text.’

Quote from ‘http://www.simpleviewer.net/products/‘

http://www.simpleviewer.net/products/

First of all I installed the svBuilder.air file.

Here is what the SimpleViewer Builder looks like.

Dreamweaver > site > new site. I then needed to give the site a name.

We called this site ‘Simpleviewer Test’. Then I clicked on the little folder icon.

Now I looked for the location where I wanted to save it. I clicked ‘Choose’.

In this case I saved it on my memory stick in a folder called ‘Website’. I clicked the save button.

Then I double clicked ‘gallery.xml’.

Here I clicked ‘Open’.

Here is what the code looks like in the gallery.xml file. Blue text can’t be edited, green text can.

It probably is quite difficult to see but near the top where it says:

title=”SimpleViewer Gallery”

I changed it to:

title=”Emily’s Gallery”

title – Text to display as gallery title
textColor – Colour of text, set as a hexadecimal code.
frameColor – Colour of frame around images, hexadecimal code.
frameWidth – Width of frame around images in pixels.
thumbColumns – Number of columns for thumbnail images.
thumbRows – Number of rows for thumbnail images.
maxImageWidth – Sets maximum width of images in pixels.
maxImageHeight – Sets maximum height of images in pixels.

Now I double clicked ‘index.html’.

Here is what the page looks like.

We downloaded these images from Moodle.

In the simpleviewer_230 file I opened the images file and deleted two files called tall.jpg and wide.jpg. I then put the new images into the folder called ‘images’.

I also needed to make some new thumbnails to replace the old ones. I used Photoshop for this. I made a new file with the size 110px x 75px. I set the resolution to 72dpi.

I opened up the image called Cloud2.jpg and dragged it over in to the new file I’d made. I moved the image around until I got a nice looking thumbnail picture. I then saved the new file in the thumbs folder. I did this for all three images.

I then deleted off the code, from the bottom, so only three lots were left. Originally there was nine lots of code but I’m only using three pictures. I had to be careful not to delete this part from the very bottom though:

</image>

</simpleviewergallery>

I changed the code so it went from:

to:

I should have called the thumb image Cloud2 like the original image. I fixed that after but I don’t have a screen shot for it.

There is also the option of adding in a link and caption.

I will be finishing this work in the next class.

Website Design

www.nbstudio.co.uk – Task 1)

April 15, 2012 Graphics blogger Leave a comment

1) What kind/type of website is it (commercial, fan site, informative, helpdesk, forum for art and culture or music etc).

This website showcases the work of a design company called NB. This website is commercial and informative.

This links to who is the website for, who is it directed at? Who might be using it.

This website is directed at any individual/person in business or any companies/community groups who have a product or service that they need some design for.

Students could use this website for research purposes, like myself.

You then need to evaluate it in terms of its function and user group – what will they think of it?

What are the visual aesthetics of the content of the website? What is the immediate ‘feel’ of it? A PMI might help

Plus – I really like the dynamic, fun and interesting home page. It loads these beautiful images (among others) that are really eye-catching.

http://www.nbstudio.co.uk/

Minus – I haven’t seen a minus point yet.

Interesting – These images are really big compared to other sites.

ask WHY it has been designed like this and HOW does it communicate.

Page size/length. Are these beneficial to the site or do they make it difficult?

I didn’t find any problem with the page size and length. The images are quite big. The biggest ones take up two-thirds of my screen. It is only a problem if I want to have two windows open at the same time.

How are images used? PMI but be specific about effectiveness and purpose

Plus – Images used as links that go grey when you hover over them. This adds dynamism.

Interesting – I like the way they’ve used the company logos for their clients.

http://www.nbstudio.co.uk/our-clients/recent-clients

Minus – I can’t really think of any minus points apart from what I’ve already mentioned above.

How is typography used? PMI being specific about:

Tone of voice of the type
Choice of typefaces – are they effective for screen use?
Bulk or lack of type – is it too much, too blocky, too small etc. Say HOW/WHY it works or does not work

Plus – Their tone of voice is confident, business like and reassuring.

‘A dedicated team of ten, we’re hands-on and always here for you.’

http://www.nbstudio.co.uk/how-we-add-value

Minus – I can’t think of any minus points. I suppose some people may want more information but they would be able to request that from the designers.

Interesting – It was interesting that the site contains type that is really big. This is eye-catching and something different and unexpected.

http://www.nbstudio.co.uk/how-we-add-value

The typefaces they use are:

Helvetica Neue in size 8.5
Helvetica Neue in size 11
Helvetica Neue in size 27
Georgia in size 11
Georgia in size 21

The type is in black and grey. I’m surprised that Helvetica looks a bit messy on the screen.

Back ground colours and textures? Effective or distracting? How and Why.

The background colours used are black white and grey. It’s nice to see little changes like this.

Does it have gimmicks, animations etc? How and why are they effective or not?

This site didn’t have any gimmicks that I could find.

Is the unity of the website spoiled (or aided) by commercial banners and so on?

There are no commercial banners or adverts which is nice as I’m not distracted.

Navigation – is it easy and straightforward or difficult and frustrating? Describe HOW and WHY this is so. Be specific as this is very important.

The site is split in to news, our clients, case studies, projects, what we do, how we add value and contact. It is logical to break down the material like this so people can find what they want.

There is no problem with the navigation that I could see. As I’ve already said some of the images are quite big but it doesn’t really cause a problem.

How do design elements such as link buttons help the navigation?

This website has these links which I didn’t notice on the other websites.

http://www.nbstudio.co.uk/projects/mothercare-extra-services

This made me think why aren’t the other websites linking to social media sites? Perhaps they don’t need to.

Website Design

www.hat-trickdesign.co.uk – Task 1)

April 15, 2012 Graphics blogger Leave a comment

1) What kind/type of website is it (commercial, fan site, informative, helpdesk, forum for art and culture or music etc).

This website showcases the work of a design company called Hat-Trick Design. This website is commercial and informative.

This links to who is the website for, who is it directed at? Who might be using it.

This website is directed at any individual/person in business or any companies/community groups who have a product or service that they need some design for.

Students could use this website for research purposes, like myself.

You then need to evaluate it in terms of its function and user group – what will they think of it?

What are the visual aesthetics of the content of the website? What is the immediate ‘feel’ of it? A PMI might help

Plus – I like the way this has been designed because its really eye-catching and interesting.

http://www.hat-trickdesign.co.uk/

Minus – I didn’t know where to click first but I’m used to this now. You just have to dive in. However it can get tiring if things aren’t labelled in a way which is quick and easy to understand.

Page size/length. Are these beneficial to the site or do they make it difficult?

I didn’t find any problem with the page size and length.

How are images used? PMI but be specific about effectiveness and purpose

Plus – See ‘interesting’ for my answer. The other plus is that by watching videos you don’t have to scroll around which is nice.

Interesting – I was really surprised to see that this site uses videos more than it uses images.

Its really nice to see the designs in situ.

http://www.hat-trickdesign.co.uk/

Here is part of the video which showed the designs in situ.

http://www.hat-trickdesign.co.uk/

Minus – If I was designing a website I’m not sure I’d use as many videos as they have. The video makes the designs look small and I cant see them very well. The designs flash by too quickly which is annoying.

The videos don’t use sound which seems like a chance lost although sound/narration can be annoying sometimes.

How is typography used? PMI being specific about:

Tone of voice of the type
Choice of typefaces – are they effective for screen use?
Bulk or lack of type – is it too much, too blocky, too small etc. Say HOW/WHY it works or does not work

Minus – I suppose some people may want more information about who the designers are and what working with them would be like. There isn’t any information that I can find that can tell me about their tone of voice. Its impersonal and strictly business.

There is a video called ‘3 minutes about hat-trick’ but it didn’t tell me anything about who they are as people.

Interesting – Their logo is interesting and memorable.

http://www.hat-trickdesign.co.uk/

Most of the type is in the typeface Arial in size 10. The colours used are black, white and grey.

Is the unity of the website spoiled (or aided) by commercial banners and so on?

There are no commercial banners or adverts which is nice as I’m not distracted.

Add any other points or comments not addressed directly by these questions.

They have a shop. I wasn’t expecting that.

http://www.hat-trickdesign.co.uk/shop/product/23?Olympic-Non-Events-Poster

Trips

Pick Me Up 2012 – Somerset House

March 29, 2012 Graphics blogger Leave a comment

http://www.somersethouse.org.uk/visual-arts/pick-me-up-2012

Pick Me Up is an amazing event and I would recommend it to anyone who is interested in art and graphic design.

I did not create nor do I own any of the following art works.

Environment

Looking at magazine layouts in Vogue

January 17, 2012 Graphics blogger Leave a comment

I really like the way the images have been arranged here because it gives me an idea for a design I could do for my project. There is quite a lot of type in italics here. Even though there is quite a lot going on here I don’t feel overwhelmed.

This spread looks beautiful and delicate. It is interesting that there is a white margin on the right side of the spread. The typeface used looks delicate and classy.

The big drop cap is really eye-catching. I love the typeface used. The right hand page is very text heavy but it is an interview so the amount of type is appropriate. You can see the use of a grid here. The pull quote is in italics.

Again there is a white column down the side and the pull quote fits in at the top. I can see that the same grid is being used here.

I thought this was an interesting spread because of how low down the title, the sell and the body text is. The reason why I think this works is because the use of white space on the right hand page reflects the image on the left. The whole spread is quite striking.

The next five spreads have a scrap-book look about them. I think I would like to discuss with my tutor and my fellow students about this way of displaying images. I suppose it is a case of taking a particular project and asking oneself a question. Is this a suitable way of displaying the images I have?

Clear use of a grid with three columns. White space left at the top to stop the spread from becoming overwhelming.

I think it is appropriate here how the images go from one side of the spread to the other and are in date order. I can see the use of a grid here that has three columns.

This spread is really clear and I can see how a grid has been used. I like the use of type with part of the title in bold.

All of the above are from the July 2011 issue of Vogue magazine. See below:

Subculture Creative Review

Double page spread idea – using two images featuring Cyber goths

December 3, 2011 Graphics blogger Leave a comment

Here is the picture I thought I would include as it’s really bright and eye-catching.

http://countess-grotesque.deviantart.com/art/rainbow-make-up-120082867

Here is the second picture I thought I’d include as it shows off their outfits well.

http://grotesque-stock.deviantart.com/gallery/#/d18d6f5

Here is what I came up with. I think it has turned out well apart from the pull quote. I had major problems trying to create it. The boxes around the green quotes stopped the outer box being made smaller. As you can see this makes a massive white space around the quote. I will have to try to work out how to fix this or I will ask the tutor.

I won’t be using this for my final idea because I think it looks a bit unsophisticated.

Subculture Creative Review

New Magazine Design – Looking at layouts

November 28, 2011 Graphics blogger Leave a comment

This double page spread is really effective. The pictures go along the centre of the page and have been put together like a collage. The body text runs at an angle. The over all effect is appealing. I don’t see anything I think is bad here.

The pictures go along the bottom of the page and have been put together like a collage. It is very interesting how the column of the body text run at an angle. The text appears to follow the shape of the buildings somehow. This design is well-balanced.

This time the images run along the top of the page and the text runs along the bottom. The sell is in the centre of the page. The body text appears ro be imitating the shape of the buildings. What a clever idea. The images seem a bit squashed together but this isn’t necessarily a problem.

Issue 4 – The title has an interesting effect. It looks like some of it has been erased. This picture is quite small so I can’t see the detail properly to be able to comment on it.

Issue 5 – The title has a different design to issue 4. This cover is striking and the type used is of different sizes. Faces have been used to make a letter. There is quite a lot going on here but I think all the different elements work well together.

Issue 9 – The title is different again. The type runs down the left hand side and I notice that it overlaps. I think this effect works well even though the type isn’t particularly clear.

Issue 10 – The title is different again. I think this design is eye-catching. The image in the centre has a bright border and there are arrows pointing to it. The black bold type really stands out.

These four covers of Ray Gun are quite ‘messy’ but the designer has made all the elements work together to make an interesting piece. I have never tried to make a piece of grungy design like this but I would like to learn.

Top – This is really eye-catching. The images and the type remind me of a cartoon. The sell is under the title and the body text is directly to the right of the sell. The images overlap the title. I think the audience of this magazine would find this design appealing. I don’t see anything I think is bad.

Bottom – What I like about this spread is the use of two subtle curved borders. One runs under the sell and the other runs under the main title. I think that’s really clever. I think I would like to use this idea in a design if there is a oppotunity.

This design looks really different to the two above. The top third of the page has been left almost blank. It’s interesting that the body text runs all along the page on the left as opposed to being put into columns. I like the way the title on the right has spaces in the words. It is very interesting how the pull quote runs vertically. I think this design works well and it isn’t overwhelming.