What is Web Designing by Zakaria
- 1. Web Designing What is Web Designing? Web Designing is a combination of using many applications that areused for art, imagery editing, creating and building vector designs, animation and motion purposes, and finally creating web pages using data languages such as HTML, jQuery CSS PHP etc. What is Photoshop? Photoshop is a term used which means the editing and transforming of photos into different and neat ones. Usually Photoshop is all about Layers; placing new layers one on top of another through the work process. Using Photoshop To begin my writing I would like to encouragethe readers of my essay of an advantagewhen using Photoshop - If you wantyour picture to be of the highest quality, then there is an option when creating the Photoshop document in deciding how sharp the images will be. This is a mind-relaxer for the Web Designer as he now has no need to increase the sharpness and saturation levels for the image throughoutthe work. And when he prints his work, there will be so many pixels for every squareinch. When using Photoshop applications like Adobe, Pixlr, etc. You can freely edit photos by changing the types of colour associated with the photo. You can change the sharpness and blurriness of theimage. You may add new layers of art such as new images on top of each other with each image being a layer. You can even move a certain artwork within the image to a different area in the same picture. For example if you havea painting of three mountains and a tree perched on top of one of the mountains, with Photoshop applications, you can actually move it onto a different mountain and the area in which the tree once was will have the same colour as before. There will be no smudging in the least for both areas wherethe change took place unlike when using the well-known Paint Application wherewhen taking this action the only outcome is a mess.
- 2. Cropping is also a feature that is available in Photoshop applications. You may crop an image at ease by choosing a desired area for removing the image. You do not necessarily haveto crop the image to a rectangular or squarelike shape, you may chooseall types of shapes, bethey regular or irregular polygon shapes. Marquee tools are used for drawing ANY shapes by clicking with the mouseand typing certain keys on the keyboard, when the drawing starts the direction of the dashed line will go in correspondenceto the direction of the mouse, and the mousemust end up whereit started in order to complete the cycle of drawing the shape. On the other hand, cropping is merely editing a temporarily removed image, making changes to it then rejoining it with the cropped image. Sharpen Tools: Sharping the image to an extent that the picture will become a high definition image since the number of pixels will increase extensively. When forming a new document one has the choice when typing the dimensions of the canvas size- he can choosewhether the units should be in inches, centimeters or pixels. There is also the bleeding option which allows artwork to be extended beyond the borders of the canvas. Imagesizeis different fromthe canvas size. The canvas defines the artboard whereas the image sizeaffects the dimensions of the artboard if the dimensions of the canvas are unaffected by desired scaling of the picture, i.e. the canvas must be locked. Artboards areused to create new documents Magnifying glass – zoom in and out of the document Hand Tool – Moving Around If one wants create a many shapes and transformthem into layers he merely has to use the marqueetool for this, he can then proceed with the next step which is to create layers for each one of those shapes, butbeware!, never unlock the background layer - which can be viewed in the layers panel, this can be frustrating for first time Photoshop users as thebeginner will haveto search for a mean to repair the damage. You can even give names to each layer such as “Koala Bear head” if the trimmed area was that of a Koala Bear’s head. If you wantto draw 2d
- 3. shapes when using Photoshop, this is not possible and you will have to use the Marquee tool for the respected purpose. Blur Tool: Making an area of the image blurry Burn Tool: Darkening an area of image Line Marquee tool: Drawing a line, be it horizontalvertical or diagonal (these streamline angles are also be carried out using keyboard shortcuts) Direct Selection Tool: selecting an object by using keyboard shortcuts Curvaturetool: bending the line to the desired extent Line tool: The only shapetool found in Photoshop Anchor Point tool: Manipulating the anchor on a given line Group Selection tool: Selecting a group of items Anchor: This is the end point when drawing a line fromthe starting point Path: This is the flow of the line Paint tool: This is used to paint the foreground and background areas. The Foreground is the area where the layer is selected. The Background is the canvas Magic Wand: This reads the colour combination of red, green & blue in each area you use the magic wand – simply select the magic wand and hover around any area and select it. Immediately you will get a reading in the Navigation bar which will inform you how much redness, greenness and blueness there is in that colour. Layer panel: Background Layer (which is locked) Layer 1, Layer 2, Layer 3 etc., Text Layer etc. Text tool: With this tool you can type sideways, vertically, horizontally, and even diagonally. When you create a new layer and select the type tool, immediately, in the layer panel, you will see that the layer is called “Text Layer”, when you type the Layer will display the text inserted into the document. With the text tool you can makethe text appear in a curved fashion.
- 4. Hue: Foreground colouring and background colouring: Foreground colouring is adding pigments to the selected layer, be it the one justabove the background layer or the layer rightthe top of the Photoshop document Ruler tool – measuring the lengths and widths of items and objects Coordinates – This tool can be used for mathematical purposes. This will display any given points on the document in accordancewith the indent lengths that will be displayed on the top and left-hand side of the document. For a given line it is possibleto change the Line thickness or weight, the type of line (dashed, complete wildly spaced dashes etc.) and even the colour of the line. If you want to copy an item twice, primarily, the item needs to be selected with the left button on the mouse, the button should be held and the keyboard shortcutAlt +F4 is pressed at the same time. Immediately a new copy of that item is produced. How do IllustrationApplications relate to WebDesign? Unlike Photoshop one can logically deduct that illustration applications are used to create artistic pieces of work rather than edit already existing ones, and that’s exactly what it’s all about. “Creating” rather than “editing”. Illustration applications are used to create vector like designs, in particular 3d graphs. Itis with Illustration applications that Graphic Designers become successfulin creating pieces of art. Using IllustrationApplications If you want to have a border around your chosen shape, you may select an Insideborder, outsideborder and eve borders which havedifferent patterns and shapes.
- 5. Using AnimationApplications Adobe Flash etc., moving objects to create videos, black dots at the base of the window symbolizemotions, breaks, pauses stops,. Flash applications areused for creating movies, videos Using Data Language Applications As of my knowledgeI know only two Data LanguageApplications, namely, Notepad & Dreamweaver. Notepad is an application used for beginners in web designing. I shall focus solely on HTML tagging in this document. HTML tagging is an abbreviation that stands for Hyper Text Markup Language and is the basic data language used to create the formatof the website. When you begin writing in a HTML document, you always write <html> and end the html document with </html>. At this moment you mustbe asking the question why I began with two arrows pointing left and right and ending with a backslash when typed again. The answer is simple, the < > sign is an opening tag and the < / >, a closing tag, the HTML tag “html”, repeated in both If you wantto have a border around your chosen shape, you may select an Insideborder, Outsideborder and eve borders which have different patterns and shapes. the opening and closing tags have data and text typed in between them, this combined information together formwhatwe call the “HTML document”. The / sign will always symbolizethe fact that what was inputted previously is secure. Just don’tforget the closing tag when using any of the Html tags! There are some html tags however, that regardless whether you insert the closing tag or not will not negatively affect the display on the web page. Examples are <br>, which defines a section break on the web page or <hr> which states that a horizontal line has been inserted, into the document. Now for the exciting part – the html tags that when both the opening and closing tags are inserted, require text between them. Examples are as follows: the “p” syntaxelement defines the beginning of a paragraph: <p> Today I went to the mall and….</p>, the “title” element defines the title of a page: <title> Swimming in Brazil</title>. “li” defines a list, “h1” defines a large header, “h2” a smaller, “h3” even smaller etc.
- 6. A Fair warning when a HTML document is produced, all the syntax elements must be typed in either capital letters or underscoreletters but it is preferable in my opinion to always useunderscoreletters as capital letters and cause confusion to some individuals. Finally in Dreamweaver, web builders can coolly carry outtheir work as everything required for Html tagging is available. Web builders that have experience in this field are expected to have the ability to rapidly create websites since they know all html tags. One of the advantages in Dreamweaver is that the users can switch from coding view to website view if they wantto see their equivalent work on the internet. I would like to conclude this piece of writing to declare that I have knowledgein how to useapplications such as Adobe Photoshop, Pixlr, Adobe Illustrator, Notepad, Adobe Flash, and lastly Adobe Dreamweaver. If anyonecan confirm what has been written in this essay is correctplease inform me, if there are any mistakes then correct me. Thank you for your time.