Tag Archives: website

New Website Have A Look

So basically when I was doing my HND we had a brief to create a website for ourselves, overall I wasn’t happy with this at all so I have taken it upon myself to create myself a more professional site, in which possible clients etc. can contact me on and look into myself abit more.

I will be updating this site all the time and it isn’t 100% yet, I have a lot more planned.

So if you get a chance have a look on: http://alexrichardson93.wix.com/alexrichardsondesign

Any questions or know how contact me on either the new site or via here!

Thanks

Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Website Design Test.

So basically for this project I can either create an HTML or CSS based web-based portfolio or my design work or I can just use one of these existing ones that are already on the web like WordPress, Tumblr, etc.

As for my decision I haven’t yet thought about it yet but hopefully after some design testing and research I will have made my decision, My teacher went through this process to create a very basic linked table based design.

Picture 1First off we had to download an already created Photoshop file that our teacher made to save time and to se us off on the right track.

Picture 2So first off after the file has been opened in Photoshop I had to slice some of the components that I want to be buttons, links, etc.

Picture 3To keep my designs and files nice and clean it’s always good to save the sliced sections to the correct name, e.g. the title section I saved a “Title”.

Picture 4

Picture 5After the sliced sections have been saved to the correct name I can then save the new document under file, save for web and devices, which will bring up this new page, by clicking save at the bottom in the right hand corner of the new page brings up the saving options.

Picture 6I first created suitable files for the new pages, one called website and in this another called Web Artwork and another called Web Files HTML and in this I saved the first sliced page as page one.

Picture 7Now that this first page has been saved as a Web Based page, meaning all of the visual information has been converted to code, I can now open it up in other web-based designing programs, which we used DreamWeaver In the case. Once opened the page looked like this screenshot above, one half is the code and the other is the visual page that will be displayed on the browser.

Picture 8Right so the way DreamWeaver works is that I need to locate all of the required information and components that are beginning used, to do this I have to go on Site, New Site, once open I need to locate the correct folder were the information is.

Picture 9

Picture 10Once the file source has been located it should pop up in the bottom right hand sub menu, all files that are in this folder will be shown here, on thing to remember is that for each new page I need to create a new folder otherwise each time I save the previous files and folders will be over written every time, deleting all of my previous work.

Picture 11Once back on Photoshop we began to create the basic second page, using the first page as a template we just need to change something on this page to make it different to the first, so I turned off the image layer and put in some basic text.

Picture 12As I was saying before When saving I went onto file, save for web and devices, after creating a second folder called page 2 in the master folder used on DreamWeaver I saved this new page in here.

Picture 13Going back onto DreamWeaver my new pages and files are now visible in the menu at the bottom.

Picture 14Now it was time to link the pages together, first off I needed to select a sliced selection on either page, in this case the first page and the portfolio section at the top, while this is selected we went onto the bottom menu to this section shown in the screenshot above.

Picture 15By clicking the target like button next the link box and holding a path tool appeared with this all I had to do was to bring it over and place it on the page I wanted it to go to, in this case Page 2.

Picture 18Once repeated on the other page the reverse way I then went onto file, preview in browser and safari, this opened up the pages in safari, which then allowed me to test the buttons/links to see if they worked.

Picture 16

Picture 17Learning this was a big help to give me a brief and slight insight into the basics of table based web design, I have previously used Dreamweaver to create a website but this was like over 5 years ago on an early version of Dreamweaver, this was a very basic tutorial but it has giving me the basics to possibly try to create my own?

My next steps in the project is for me to look at other portfolio based websites and applications, for me to research and look into portfolio designs and colour schemes, etc and for me to possibly create my own basic web-based design like this using my own images and work?

 

Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,