Wednesday 25 April 2012

Dreamweaver Workshop 2 : Web Seminar


<html> </html>

<title> </title>

<body> </body>

<head></head>


Head tags include all the information that is not visible on the webpage, the functions and instructions for different aspects on the page. 


Div means division, its how you lay a website out in terms of boxes etc. 

CSS - Cascading style sheets

When creating a website, it is essential to create folders with lowercase titles and no spacing. This will be constructed from a  root folder containing a folder called images. 

Always make the coding as simple as possible to understand. 
Position new tags on a separate line, keep different tags on new lines.



CSS 

Apply attributes to the body- When working with simple text functions, typing the word body alone with a space and then a curled open brack brings a drop down of the default animations.

CSS is always placed within the head tags, as it contains information on the functions of the page rather than the content itself. 

Indenting tags, separates out linked pieces of html.




<MARQUEE>
<p style="font-family: helvetica">
  <font size="4"><font color=#C0C0C0> WELCOME TO... </center><br />
<br /><br />
<font size="8"><font color=#D5BDBD> <B>HELL</B> </center>
<br />
<font size="8"><font color=#CC8A8A> <B>HELL</B> </center>
<br />
<font size="8"><font color=#BD1C1C> <B>HELLO.</B> </center>
<font size="8"><font color=#D5BDBD> <B>HELL</B> </center>
<br />
<font size="8"><font color=#CC8A8A> <B>HELL</B> </center>
<br />
<font size="8"><font color=#BD1C1C> <B>HELLO.</B> </center>

<font size="8"><font color=#D5BDBD> <B>HELL</B> </center>
<br />
<font size="8"><font color=#CC8A8A> <B>HELL</B> </center>
<br />
<font size="8"><font color=#BD1C1C> <B>HELLO.</B> </center>

<font size="8"><font color=#D5BDBD> <B>HELL</B> </center>
<br />
<font size="8"><font color=#CC8A8A> <B>HELL</B> </center>
<br />
<font size="8"><font color=#BD1C1C> <B>HELLO.</B> </center>

<font size="8"><font color=#D5BDBD> <B>HELL</B> </center>
<br />
<font size="8"><font color=#CC8A8A> <B>HELL</B> </center>
<br />
<font size="8"><font color=#BD1C1C> <B>HELLO.</B> </center>
</MARQUEE>



When saving files for web and mobile devices don't just click save as in photoshop etc. Always select save for web and mobile devices. Select PNG 24 to create an image with interlinked layers, allowing images to retain their transparency. The smaller the file, the better as webspace costs money plus the speed of your webpage loading will be judged on the amount of memory it needs to load.


A couple of my first attempts of putting together a basic webpage layout;








Sunday 22 April 2012

IMAGE // Self Initiated brief : Progression

After separating out each one of my characters, I began to work my typeface on a whole, producing some Ideas for my final posters. Below is some of my experimentation, I feel like overall there are a few tweaks to some of the letters that I would like to re-draw and re-make.




I then went onto using some colour to bring my typeface to life a little bit. Having a solid white backdrop doesn't give them any definition, I think sticking to my 4 colour scheme and working around the contours of the letters will add much more depth and make them stand out on the page when printed. 




Other colour ways;


 

I'm reasonably happy with my results so far, I think I just need to finally decided on the format of its presentation. As I will be making a publication to explain each typeface I decided to create a repeat pattern/cover page that would fit in nicely with the aesthetics of my typeface.

I think this would look really crisp printed onto acetate or tracing paper, possibly as an inlay sheet for my publication or even as part of my posters.



















IMAGE // Self Initiated brief : Development

 My main typeface is going to consist of lots of hand drawn subject matter built around the Futura font family. Below are a few of my first initial sketches. I've tried to use subject matter such as, skateboards, pens, spray cans, vinyls, scrap metal etc. A range of things that aren't necessarily associated but when placed next to each other work as a set. The issuu document below covers some of the subject matter I started to draw from.



 


After sketching out most of my letters to a state that I was happy with I began to transfer them across to work with in photoshop. Alike to the process I talked about early I'm using the threshold tool and colour range selector to completely separate out each letter into a black and white rasterized shape. I decided to work in pencil first, then outlining the main shapes using biro later to be thickened with a fine liner.