Building your own website

Discussion in 'Tutorials & DIY' started by laddergarder, Jun 10, 2012.

Advertisement
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Welcome to the UK Window Cleaning Forums.
    Starting or own a window cleaning business? We're a network of window cleaners sharing advice, tips & experience. Rounds for sale & more. Join us today!

  1. laddergarder

    Member

    Joined:
    Nov 29, 2011
    Messages:
    1,301
    Likes Received:
    158
    Ok, so you have a thriving window cleaning business and you want to take it that step further and create a website for it. Ok, well this is my guide and tutorial on everything you need to know.

    There is way to much information to post up all at once so I am going to do this in stages and post up little bits at a time, hopefully with a few screen shot to guide you through it, so there will be more posts to follow.

    I will assume that you know nothing about websites and how they are created and try to explain as many terms and techniques as I can, so I apologize to anyone know has a bit more of a knowledge base, just skim the stuff you already understand.

    Can I ask that forum members avoid replying to this topic until the website example has been finished, as I don't want to see the main contents of the tutorial getting lost in reply's. However if you are unsure about a particular stage, and need more clarification, post away.
     
    Advertisement
  2. laddergarder

    Member

    Joined:
    Nov 29, 2011
    Messages:
    1,301
    Likes Received:
    158
    What will you need and how much will it cost?

    So to build at website, you are going to have to get your hands on a few tools. Or software should I say. While building this website, I am going to use the following:-

    Dreamweaver
    Photoshop

    There is alternatives that you could use to both of these tools, some of which are free, however you can also download free trials of both these pieces of software from adobe.

    For a Photoshop alternative, GIMP is one of the most common free alternatives, http://www.gimp.org/.
    For a Dreamweaver alternative http://net2.com/nvu/ comes highly recommended.

    Member comment (NearlyClean): Also Komposer is good free wygiwys editor and is very similar to the older dreamweaver.

    However please be aware that I will be using the adobe products listed above and the methods developing sites will be different in different software suites so I would recommend you get your hands on a copy of the adobe suites mentioned above.

    So how much will it cost, well, for the sake of cost efficiency I would use a trial, as adobe products are expensive, you can get an old version like cs3 for under £100 on some sites, and Dreamweaver Cs5 is available from Amazon for just over £100.

    At that is all you will need, however when hosting your site you may need an FTP client. I think I paid about £40 for CuteFTP, however fileZilla is also a good client ans is free. I will go over what and FTP client is and what it does at a later date, lets just focus on creating the site first.
     
  3. laddergarder

    Member

    Joined:
    Nov 29, 2011
    Messages:
    1,301
    Likes Received:
    158
    Creating your canvas for your work of art

    So the first thing you are going to have to do is create a new page in Photoshop, this will be where we will draw out the website design to be ported into Dreamweaver. There is allot to explain in that sentence, but for now lets just get a page opened, now set the width to 1366 pixels and the height of the page to 1600 pixels. You will want a resolution of at least 300, and set the background to transparent.

    There you go, that is your blank canvass ready and waiting for your work of art.

    Ok, so lets explain a little bit fist, the only thing we are going to do is create a basic shape, that will resize as the page is resized on the users screen. So for this tutorial we are not going to look at shapes with patterns, for functionality we are going to keep it fairly simple.

    So what do I mean by porting it into Dreamweaver? Basically once we have drawn out our design, we will slice the image up which I will explain later, and rebuild the image in Dreamweaver using Divs and some CSS - Cascading style sheets. In a way which will allow the page to be reshaped to work on any screen.

    Have a look at my website,(link in my profile page) press the restore down button to the left close button on your browser and grab a corner with your cursor and change the size and watch how the page extends the backgrounds etc.

    That is what we have to consider when creating this design, how will the page be changed and how while the design be adapted to different screen resolutions.
     
  4. laddergarder

    Member

    Joined:
    Nov 29, 2011
    Messages:
    1,301
    Likes Received:
    158
    Guides

    When creating a design in Photoshop, its is fairly important that the design is centred and not centring it can lead to all different kinds of problems later on.

    Ok so what is a guide? a guide is an invisible line, of sorts. It is visible on the screen, but it will not be visible when printing or saving the file to Jpg etc. You can move the lines around as well.

    What we need is a line right down the middle, so we know our shape is in the centre of the screen, so here is what you do, go to [view] then click [new guide]. Select a vertical orientation, and right click the value in the box and select pixels. Now we know our page width is 1366 pixels, so to create a guide that is half way along just type in, 683 pixels then press [ok].

    That you just created your first guide in Photoshop.
     
  5. laddergarder

    Member

    Joined:
    Nov 29, 2011
    Messages:
    1,301
    Likes Received:
    158
    Photoshop - The basics

    So before we dive into making shapes and designing our brilliant website, we need to go over some basics about Photoshop. If you have a fair understanding of Photoshop just skip this post.

    Obviously I cant describe every aspect and you wouldn't want to read that, I'll just give a brief overview of the different tools and techniques you are going to use, then its up to you, to get on to youtube and google and start looking in to any bits you cant figure out, you can also pm me, and i'll do my best explain.

    Layers

    The first thing you should notice is the layer 1 with the little eye next to it on the right hand side. Layers are brilliant, and very handy when it comes to creating website designs. I use layers with almost everything I do in Photoshop. Think of layers as pieces of transparent paper that you can draw on. They sit on top of one and other to create the final picture or design.

    There is a few basics that you should notice about layers, firstly the eye. If you click that you can make it visible or invisible. To create a new layer, just click the new page at the bottom of the layers box. The delete as layer, just drag it to the little bin at the bottom of the layers box. Finally to change the transparency of a layer, type a percentage into the little box next to the word opacity.

    Now that is about it, there is allot more you can do with layers but that is the basics.

    Shapes

    Shapes are brilliant, lets just create and example to show you what you can do, on the left hand side you should see a whole bunch of tools, near the bottom about the fifth button up, there is a little box, right click that, and click the eclipse tool, then just left click on the screen and drag out a circle. There you go you have just made you first shape. Now do the same again for a square. Place it some where over the circle. Notice that you now have two layers, that is your two shapes. click the box to the left of shape two in the layers box and change the colour to a different colour from the circle. Now right click on shape two, and click [create clipping mask]. You see what has happened, the shape is now inside the boundaries of shape one. The is very powerful and will come in very handy later.


    [​IMG]



    more Photoshop basics to come....
     
  6. laddergarder

    Member

    Joined:
    Nov 29, 2011
    Messages:
    1,301
    Likes Received:
    158
    Vectors

    Ok so this is a huge topic on it own, but you can get plenty on youtube videos on this, so I will try to be brief. You should understand a little bit about the interface the Photoshop has now, and can see that on the left is your tools pallet. When you select a tool, you will have a number of options along the top for that tool.

    So the next tool we are going to look at, is our vector drawing tool, which looks like a little fountain pen. Go ahead and click on that. What we are going to do is create shape using the square inside the circle as our guide.

    if it makes life easier, you can click on the little magnafing tool and zoom in, then just click the fountain pen again. OK, so lets go round the circle, left click at the start of the curve, then left click again about half way around the curve, BUT DONT LET GO this time, hold it in, and drag in along a little further. see how you can create the curve.

    Ok so it might not match perfectly, here is what you do, hold down you control key on your keyboard, and grab one end of the line that has come out and change the curve until it matches. Now if you wwere to just click the other end of the curve Photoshop would follow that curve but we dont want that. So hold down your alt key and click the second point you have made. notice how one half of the line has disappeared. That means that you now have the option to create a line or a curve.

    So now do the same again to finish of the curve. then follow the shape around until you get back to the first point. There you go your shape is almost done. You can now click the little eye next to your first two shapes to make them invisible.

    I want to show you one more thing that may stump you later. If you look up to the options for the pen tool, you will see something that says [auto add/delete] and next to that there is four little boxes, if you ever want to cut a shape out of a shape you have to select the third one along, then create shape inside the shape. Go ahead and try this, and draw a box inside your new shape.

    There you go, you have now created your first vector drawing!

    [​IMG]

    Ok so that might not seem that impressive just yet, but with that simple little bit of knowledge have a look at this vector drawing I have done of my van, this was created for the guys that did the sign writing for me. Which has all been done using simple shapes.

    [​IMG]
     
  7. laddergarder

    Member

    Joined:
    Nov 29, 2011
    Messages:
    1,301
    Likes Received:
    158
    Blending Options

    Blending options are brilliant, there is so much in there that you can do with layers in Photoshop, lets show you one or two important ones you might like. Here is what you do, right click on the layer for your little shape you have made, and click [blending options...]. A little layer style box should show up, and as you can see there is loads of stuff you can do there. But for now I will just show you one thing which we may use later in our design.

    Lets select Colour overlay, tick the little bos next to it and then click colour overlay to see the options. Now select a medium grey for the colour, and press ok, you shape should now turn grey. Now I want you to select the layer just under our new shape, a click the little icon that looks like a page in layers box, this should give you a new layer just under your object. Select your paint brush tool to the left, and then hold down your alt key to bring up your sampling tool, while holding the alt key click somewhere on the grey object. There you go, you have now selected a new colour for your brush. Now to change the size of you bush, just lick the circle with the number under it in your tools options pallet, and change the master diameter to about 600 pixels for a good large brush. Now just paint your new layer grey. That is you just created a background layer for your object.

    Now let go back to our object and change something else, go into blending options again, and look at the bevel and emboss options, change them to the settings I have in the following picture...

    [​IMG]

    Then just click ok, and you should have something like the following...

    [​IMG]

    This is quite a cool effect that can make you objects and writing look like stamped plastic, and as you can see fairly easy to do, later I will cover more effects you can do with Photoshop, but I would recommend that you play around with blending options and look at how all the various options available will change your shape, you can create textures, shadows, outlines, and much much more, so have a little fun with it.
     
  8. laddergarder

    Member

    Joined:
    Nov 29, 2011
    Messages:
    1,301
    Likes Received:
    158
    Ok, one last thing before diving straight in to our design, I want to show you how to stroke a path. You see you can create solid shapes with your vector drawing tools, and you can even use the blending options to stroke a line around the shape. But sometimes you want to just draw a nice clean line, and know you hands will not be steady enough. So you can create a path, then stroke the path with your bush. You can even simulate pressure so your line can tapper off at the end.

    Stroking a vector path

    So here is how its done, when you have selected your pen tool you can also use it to just draw lines, but before we do anything with that we have to go to our paint brush, set up which colours, size of brush etc as these will be the settings used to stroke our path. So once you have done that, go a ahead and go to your fountain pen. You will have to change one little setting, up on your options pallet there is three little boxes, just after the fountain pen icon, you want to select the middle one, its the box with the fountain pen over it, with points at each corner.


    [​IMG]

    You can use this tool as normal now, then all you have to do is right click your line, then click stroke path, you will see a check box for simulating pressure, this can be very useful. Give it a try.

    [​IMG]

    And thats about it, thats enough for you to make your own design using Photoshop. I know you think nahh, but bear with me, it will come together.
     
  9. laddergarder

    Member

    Joined:
    Nov 29, 2011
    Messages:
    1,301
    Likes Received:
    158
    Our design

    This is the bit were you just have to be creative, there really isn't any trick or rule, you just have to use simple technique to create some nifty vectors and drawing to build up your design. One thing you can do is go on to other websites and look at them for inspiration. I find template monster really good for inspirations and ideas for website and logo designs.

    Ok, so using only the tools I have describe here is the design I have come up with to begin porting into Dreamweaver, which we will be starting next :rolleyes:

    [​IMG]
     
  10. Paul

    Paul Guest

    Very good thread this pal, very helpful.
     
Advertisement