Web Update

Web Design

Above is the layers bar which shows the amount of frames I have used for each layer/page.


This is the home page of which is yet to be completed, the completion of this page will be done when I place the FMP final in the box with a tiny description added underneath of what it is. I feel that the final should be placed here as it is the last project of this course.

This is the about and contact page that has a little information about me and my gmail address for if people wanted to contact me about any work. The lizard on this page was the lizard I drew with the Wacom. This page is still slightly unfinished as I am going to add more about me and some more contact details however from what has been done of this page, I really like how the paragraph was separated and my lizards tail took the position of the paragraph space.

This is the gallery page of which consists of 20 odd frames at the moment, this is also unfinished in the way that I want to add a few more slides of pictures to this page however this can shortly be achieved and ready for the end of year show which is shortly arriving at college.


This website is to be completed for the end of year show at the college which will be in June. It will be displayed at the end of year show on a projector.

Web Designing

I wanted my website to base around something that interests me and shows me in my work. From this idea I decided on lizards, having 4 lizards in my home gave me reason to stick with this decision.

The fact that i could take pictures of my own lizard gave me primary research for the web design and also character to base my website around.

This is a simple drawing of my lizard Chooki that I produced on the wacom to be placed on my website.

Grid Website Layout

 

Web Layout:

Three Grid Column:

Above is a simple three grid column website design I did roughly,  although it is simple it has all the things that would be needed on a website which is a heading/logo/website name, Tabs (Home, Contact Us, About Us, ect...), Imagery and information. For this I decided on making it simple but putting all the tabs in one box, the heading at the top, the information underneath and an image underneath the tabs.

Six Grid Column:

Below are examples of a more sophisticated website design that I did roughly, this included the use of a six grid column which involved text for four of the columns and the images and little text in the two columns. Below is not just a home design but a layout for each of the tabs/button. As this is a design roughly for my website I had the idea of four tabs/buttons (Home, Contact, Gallery and Competition). Each tab has a design of which is different in some way; this is the layout I would like to use but have changes where I would like to add different types of flash imagery going across the page. The picture will not be the same on each page, it will show my favourite images, artists or pieces of work and say what it is on the picture in the corner, if you click on the image it will lead you to another picture which would be my inspiration from that piece or my own version of it. The flash illustration would be something to do with my like and will be different on each page to change to the next. 

 

File Formats ~ Web

HTML ~Hyper Text Markup Language, this is the coding used to display websites and other information displayed in a web browser. It consists of the use angle brackets and slashes to form the code with the information needed also for example:

This is a simple example of a HTML code of which I found on the website seen on the link below:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

CSS ~ Cascading Style sheets, this is a style sheet language that is used for the describing of the look and formatting of a document that is written up in a markup language, HTML. This is for things like the font, colour, alignment and size.

This is another simple example which was also found on the same website:

http://www.w3schools.com/css/css_howto.asp

FLA ~ FLA contains source material on the application Flash, this can be used for web for the use of flash design and also the use of creating buttons of which I have an example of from creating my own:

This is the normal timeline.






Whereas the one below is the scene timeline displaying the faces of the button.

SWF ~ Is an adobe flash file format that is used for multimedia, vector graphics and action scripts. This could be containing animations or anything needed to put on a website like activity on the page and buttons.

PHP ~ This is an open source which has the general purpose server, it has side scripting language which was originally designed for web development to produce dynamic web pages.

MYSQ Database ~ This is the open source relation database management system (RDBMS) of which runs as a server providing multi-user asses to a number of accounts.

FTP ~ File Transfer Protocol is the standard network protocol which is used for transferring files from one host to another over a network.

HTTP ~ Hyper Text Transfer Protocol is an application protocol that is used for distributed, collaborative, hypermedia information systems which is the system of data communication for www.

File Formats

.PSD ~ A PSD is a file format on photoshop, images in photoshop are bitmap. PSD is only for adobe photoshop and keeps all the layers in tact so that when you reopen it everything will be there.

This is an example of the layer pallet in photoshop, when opening up my Borough Market editing photoshop document this comes up in the layers pallet showing the last thing I did to my manipulated item and keeping it in tact for if I then wanted to do more to it.









.JPG-RAW ~ A JPG is a file format for images that can be opened on anything, a windows computer, mac, phones act. It is an image that has been compressed, pushed together to produce a picture, all the layers would have been pushed together without being edited. Whereas RAW is also a compressed file format for images but you can compress it yourself by editing them first without having a jpeg and then editing it in photoshop.

.TIFF ~ A Tiff is an Tagged Image File Format that is used for storing images like JPEG. Gives a higher quality image for when you print.

.PNG ~ A PNG is a Portable Network Graphic that makes the background of a bitmap image transparent.

.GIF ~ A GIF is a Graphics Interchange Format which gives an image transparency so that when going on a page it can overlap a image but not have a white background covering the image up, it is also used for making little animations and used in videos.

.AI ~ A AI is file format in illustrator, images in illustrator are vector if converted. AI keeps the vectors clean and crisp.

.IND ~ A IND is a file format in InDesign which saves all the text and images safely for when you go back on the document but when going back on the format, if having photos on the document you have to change the image quality.

.PDF ~ A PDF is a Portable Document Format which is used to represent documents in an independent manner of application software.

Bitmap ~ A bitmap can not be stretched due to being a pixel image it shows you the pixel grid of which is made up of squares, this means that when making an image bigger to print it the image will pixelate like this :

Vector ~ A vector can be stretched and give a clear and crisp image without the use of pixelation being shown, this means that we can then make the image bigger to print it shown by the image below:

Both these images were zoomed into 1200%

Web Design Research

In our Web Design lesson we have been asked to do some research, this involved us finding a website of which would help us to decide our layout for our website we create.

From looking at the website below I found this Bottle Bell Photography:
http://www.thephotoargus.com/inspiration/40-great-photographer-portfolio-websites-for-inspiration/

Bottle Bell Photography has an amazing professional website of which looks rather spooky to the eye at first. It starts up with some music and a dimming light like a horror. The light has words appear in it like "conceptual", "emotive" and "transcendent" before coming up with the final "BOTTLE BELL PHOTOGRAPHY". If you want to miss this intro it has the option at the bottom of the screen. the colouring is simple with the use of black and a creamy colour between green and yellow (like a brown). The website has a textured flower background (like wallpaper) to make it a sophisticated website.

After the intro, the website goes straight to the gallery where you then click on a image of the four displayed to pick a category of photography you would like to look at. It goes straight to the set of photographs where it then is displayed as a small slideshow with a little information about the selected category at first, this slideshow can also be viewed at full screen of which is helpful as the photos are not particularly big. The name of the photograph is viewed above.

I like this website because it is different from other photography websites with the use of a slideshow and being presented as a film at first making it more interesting to look at. Out of all the websites I looked through this was my favourite as well as another website.

The website is seen on the link below:
http://www.bottlebellphotography.com/

Tom Lewis~ Manga Artist

Browsing through a facebook page about visiting Japan, I found a post about a London-based Manga Artist called Tom Lewis and when searching his work I found some really beautiful pieces he created. From looking at the two on the left it gave me some inspiration for my Web Design. I could have a little character of myself with a tree coming out and things I like on the branches like in his work and the items on the branches would be my buttons so when clicking on one it will bring up a screen and would include all of the things needed of that button. I think this would be interesting because it will not be boring, there will be movement in the webpage and I could use flash to make wind come across the page and move the buttons side to side as if wind had hit them. Therefore making a very sophisticated, interesting website with the use of movement, creativity and uniqueness as well as having a part of me in the website more.

I love Tom's work because even with the use of Dark Colours, it doesn't look depressing. It has beauty which I haven't seen in many other illustrations, it brings a smile to my face with how beautifully it is done and how much it stands out with the use of colour. The lines are beautifully drawn out showing the concentration and dedication to making a wonderful, sophisticated, unique and gorgeous piece that can touch the heart with one look. Another reason I love it is because of the inspiration of Japan, his pieces bring the beauty of Japan to them with the simple use of the Kimono and the Japanese writing. I love Japan personally which brings more excitement to his piece for me and makes me love them more.

His website is seen on the link below:
http://www.tomlewis.co.uk/

Information about him seen in the link below:
http://www.sabotagetimes.com/reportage/tom-lewis-the-urban-artist-with-talent-to-burn/

Creating a button in Flash

Today I created simple buttons with the use of flash, this is to give me the experience to help me when working up my own website. I can use this simple method to develop up a better looking and complicated button for a professional website.

The first thing I did was create an Action Script 2 document and I drew a square of which I will then turn into my button. I did this by going to modify - Convert symbol. I gave the name Button 1 and then changed the type which is known as the element to Button.

Press cmd L to get the library up which shows the button so that if wanted you can drag this onto the page to have more buttons (helpful for a webpage).

Double click on the button and it comes up with a grid on the button, this is to show that the button is a vector, there is also a blue box around it and a cross in the corner to show you that it is a button. When double clicking on the button you get a new timeline come up which displays the programming of the button/ button settings.

There is 4 states to a button, these are:
 Up - Normal state
Over - Hover state
Down - Hold down state
Hit - Click state

Each state should be different to define the button more. For example the colours would be different for all states BUT the down state and the hit state will be the same colour. To make this happen you need to insert the button onto each state but this is by going to Insert - Timeline - Keyframe

This copies the button onto the next page and then you can change the colour to show it is a different state of the button.

After we finished this we clicked on scene 1 which took us to the original timeline and not the shape programming/ settings. We then saved this as a flash document format (fla) and pressed cmd enter to view the button and test it to see how it works or if it work.

You can add text to the button but to do this you should write it on the page then place it onto the button. Click on the text and copy it, instead of pasting it onto the next state with cmd v instead press shift cmd v. This will then place the text onto the same positioning as on the previous state instead of the middle of the page.

Web Design

Today I created my first website using TextEdit to write down the basic coding for the website. The code looks very complicated but if you know what each thing means then it should be very simple. 

The image to the side is of the code without the use of styling coding used, this code is very short and simple which would be good if you wanted an extremely boring and simple website. 








To the side is what this code produces without styling, it is simple. boring and poorly set out.





 





The picture to the side is the code we used to add the style to the website. This code is much more longer and looks more complicated by is very simple if you know what everything means and if it is set out nicely with the use of spaces. This adds more depth to the website and makes it more interesting and modern. This is just the basics to how to create a website.

The picture to the side is of the website with the style added, comparing this to the image without style, this website looks much better and more effective.

To create the website we used HTML, this is a web language of which stands for Hyper Text Markup Language. 

Websites that helped me create the website are linked below:

http://www.w3schools.com/tags/tag_doctype.asp

http://www.w3schools.com/css/css_howto.asp

They helped me due to the example codes.