CREATING BANNERS & IMAGES USING MS PAINT & ANIMATED PROGRAMS

Transcription

1 Support for Website & Online Store owners CREATING BANNERS & IMAGES USING MS PAINT & ANIMATED PROGRAMS A banner generally consist of some text and images. There are many ways in which you can make a banner, it will depend upon the programs you have access to and your skills. If you want a fantastic high quality banner/logo/image design it is recommended that you get help from a Graphic or Web Designer otherwise, explore some of our methods. Hint! The more you learn about the MS Paint program the more flexible you will become at manipulating text and images and achieve what you want for your Artwork. Lesson 1. Creating a simple banner with just text using MS Paint Lesson 2. Creating a banner with pictures & text using MS Paint Lesson 3. Creating a banner using an Animated Program Lesson 4. Creating a banner using an Animated Program Lesson 1. Creating a simple banner with just text using MS Paint We will use the MS Paint program to create various images because this program comes free with MS Windows and is already installed on your computer. Once you create your banner/image and saved it as a jpg type file you can upload it to your website or online store. Step 1. Run the MS Paint program. RUN MS PAINT MS WINDOWS 7 RUN MS PAINT MS WINDOWS 8 a. Click on the Start button a. Perform a search for Paint b. Click on All Programs b. Click on the Paint icon c. Click on Accessories from the menu d. Click on the Paint option from the menu * the MS Paint program will run Sometimes you will be asked to make an image/banner a specific size so it fits within its dedicated space. For an Online Store Banner the size is 500pixels x 175pixels and it must not be any larger or smaller or it wont be accepted. Step 2. Display the Ruler so you can see the size of your banner. DISPLAY THE RULER a. Click on View from the main menu b. Click on the Ruler area to place a tick c. Click on Home to return to the Home menu Step 3. Set the Terms of Measurement to Pixels and make the Worksheet size 500 Wide and 175 High. MEASUREMENT PROPERTIES a. Click on the Paint scroll icon from the main menu b. Click on Properties from the menu c. Click on Pixels for the Units area d. Enter 500 to the Width and 175 to the Height e. Click on the Ok button

2 Step 4. Fill the worksheet with a colour. (View the diagram below) SET THE PAGE COLOUR a. Click on the Home tag b. Click on a Colour from the Colour Pallet c. Click on the Fill Bucket icon from the Tools area e. Click anywhere the Worksheet to apply the colour Step 5. Create a Text Box, select a Font and Size then type your text. CREATING A TEXT BOX a. Click on a Text icon * A Text Tools Tag will appear and a the toolbar displays functions relating to text formatting b. Click on the Font Scroll icon and select a font c. Click on the Size Scroll icon and select a size d. Click on Color 1 as this is the forecolour then on a colour from the Colours Pallet e. Click drag on the worksheet to draw a Text Box f. Type your text Note: You can only edit the text and the text box when the dotted border is visible, once you click on the worksheet the text becomes locked onto the sheet If you make a mistake you can always active the Undo function located on the Title bar. Step 6. Create several Text Boxes and enter the text you need. * Be persistant and learn by your mistakes. Use the Undo function if you need to. * Always check what font size, colour, etc are currently selected by looking at the toolbar Step 7. Save the image making it a File. The File Type must be a jpg so you can upload it. SAVING AN IMAGE FILE a. Click on the MS Paint scroll icon b. Click on Save from the menu * The Save window appears, you must select the folder you want to store your file into c. Select a Folder eg Mywebsitefiles d. Enter a Filename e. Click on the Save as Type scroll icon and click on JPG f. Click on the Save button * The filename is now displayed on the Title bar Congratulations! you have just created a jpg file that you can upload to your website.

3 Lesson 2. Creating a banner with pictures & text using MS Paint Again using just MS Paint we will create two lengthy image designs to be place in the Left or Right Side Boxes of your Online Store or they can be used for your website. This banner will consist of both images and text as shown in the diagram. If you are setting up an Online Store you will need a image/banner for the top of the page and also you can have up to 3 images placed on both the Left and Right sides. Step 1. Display the image on the screen. It can be an image from Google or a picture you took with a digital camera. You may need to Zoom in or out to get the image to size of around 4cm x 4cm being 150pxls x 150pxls as we are creating a long thin image we don t want the images too wide. Your Camera Google Images (Copyright may apply) The Print Screen key is generally found top right of the keyboard. Step 2. Perform a Screen Dump (Copy of the Entire Screent) COPY THE ENTIRE SCREEN SCREEN DUMP a. Press the Print Screen key * Nothing seems to happen but a copy of the screen is stored in your PC memory which you can not see. Step 3. Step 4. Run the MS Paint program. (View page 1 for instructions) Perform the Paste function. PASTE a. Press Ctrl+V or clickon the Paste icon located left of the Toolbar Note: Note all programs have a Paste or Copy icon so it is wise to use the Ctrl+C for Copy and Ctrl+V for Paste)

4 The copy of the screen is now placed on your worksheet and you can now select the image and take a copy of it, once we have a copy of just our image we can call upon a new blank sheet and paste the copy of just the image onto the new clean worksheet so we can work with it and start to form our banner/image. Step 5. Select the image. SELECT a. Click on the Select icon from the Toolbar b. Click drag from the top left corner to the bottom right corner of the image you want * The image will be surrounded with a dotted border. Step 6. Perform the Copy function. COPY a. Press Ctrl+C or click on the Copy icon located left of the Toolbar Now we have a copy of our image stored in memory. We will need a blank worksheet to work with. Step 7. Call upon a New Sheet. NEW SHEET a. Press Ctrl+N, click on Don t Save from the message) or a. Click on the Paint Scroll icon, click on New, click on the Don t Save button from the message Step 8. Step 9. Set the size of your worksheet to be 230pxls x 530pxls high. (6cm and 14cm) (Click on the Paint scroll icon, click on Properties, enter 230 & 530, click on the Ok button) Perform the Past function. (Press Ctrl+V) so your image appears on the Worksheet. You can only move an Image when it is selected (see the selection markers are visible), if you happen to click on the Sheet the image become inbedded and the selection markers are removed. If this happens you will need to reselect the image then move it. Step 10. Move the image down to the middle of the banner. MOVING A SELECTED PART OF THE WORKSHEET a. Place the mouse pointer in the middle of the image or selected area * The mouse pointer switches to the Move Symbol b. Click drag the image) This will be our main worksheet we will design on, because we need more images we will run the MS Paint again to have a separate worksheet to juggle our images on. Step 11. Run MS Paint again RUNNING A PROGRAM TWICE a. Right click on the Paint icon located on the Status bar b. Click on the Paint option from the menu Notice you have MS Paint running twice as you can see by the pointing to the MS Paint icon.

5 Step 12. Step 13. Get another image on the screen, zoom in or out to get the image size you want then press the Print Screen key. Go to the second MS Paint window (the one that is not the long banner) and perform the Paste function. (Press Ctrl+V) Step 14. Select the image (Click on the Select icon, click drag from top left to bottom right) Step 15. Perform the Copy function (Press Ctrl+C) Step 16. Go to the MS Paint window that contains the banner and perform the Paste function then move the image down the bottom of the banner. Step 17. Perform Steps 12 to 16 and place the image at the top as shown in the diagram. You can move the images around by selecting them first then moving them. Ensure they line up neatly. Step 18. Erase any unwanted lines or shadding. ERASE a. Click on the Eraser icon b. Click drag over unwanted content on the worksheet We will create a similar image next to this one. Step 19. Widen the Worksheet to 575pxls wide. (Click drag the Worksheet right selection marker to the right) Step 20. Draw a large Rectangle Box and fill the box with a colour. (View the diagram on the next page) RECTANGLE BOX a. Click on the Rectangle Box b. Click drag to draw the Rectangle Box c. Click on a Colour from the Colour Pallet d. Click on the Fill icon e. Click within the Rectangle Box you drew Step 21. Select one of the images on the left. (Click drag around it) and perform the Copy function. Step 22. Perform the Paste function (Press Ctrl+V) The copy is placed top left and is currently selected, click drag to move the image to the middle of the coloured box. Step 23. Insert a Text Box at the top and enter some text. (Click on the Text icon, select a colour, font then type the text) Step 24. Insert a Text Box at the bottom and enter some text.

6 Now we have two nice long images that we can add to our Website or Online Store. Step 25. Select the entire image on the left. (Click on the Select icon, click drag from top left to bottom right surrounding what you want) and perform the Copy function. (Press Ctrl+C). Step 26. Run the MS Paint program again. (Right click on the MS Paint icon on the Status bar, click on Paint) Step 27. Perform the Paste function (Ctrl+V) and ensure the worksheet fits the image neatly. You may need to click drag the selection markers surrounding the sheet. Note: If you don t see the selection markers surrounding the sheet, click on the Grey area ouside the White worksheet and they will appear. Step 28. Save the file giving it a name and ensure to set the type to jpg so we can upload it. Step 29. Close the MS Paint window. (Click on the Close window icon) Step 30. Select the entire image on the right. (Click drag around it) and perform the Copy function. (Press Ctrl+C) Step 31. Run the MS Paint program again. (Right click on the MS Paint icon on the Status bar, click on Paint) Perform the Paste function (Ctrl+V) and ensure the worksheet fits the image neatly. Save the file giving it a name and ensure to set the type to jpg so we can upload it. Congratulations! you have just created a jpg file that you can upload to your website. Take the time to play around with MS Paint as it is a very useful program. MS Paint is one of the main programs you will use to down size image files later sample: from 1859kb to 82kb so they load quickly when your website is visited. The first thing people will connect with is your Banner and secondly any other images on the screen because Images are simply the first thing people look at, then they go onto reading.

7 Lesson 3. Creating a banner using an Animated Program If you do a Google search for free banner making programs or Create an Animated Banner or Animated Text you will find a few very cleaver websites that offer the service of creating banners or fancy text, once you learn how to create the banner/image/artwork you can save it as a jpg or gif file which you can upload to your Website or Online Store. Most animated files are gif type files. Step 1. Run the Internet Explorer program and enter this web address to the Address bar at the top. Step 2. Working through the program create your text by following the steps then click on Make 3D Text Button at the bottom Step 3. Go to the top and Save the File SAVE PICTURE a. Right click on the Text that is now displayed at the top b. Click on Save Picture As from the menu c. Select your Folder d. Edit the Name to eg. Your business name banner.gif Google spiders will collect all image files and display them with its Image Search Engine, so if you add your business name to the file name it will be displayed if someone does a search for your business name. Congratulations! you have just created a gif file that you can upload to your website. Lesson 4. Creating a banner using an Animated Program With this program you can create an animated banner with images in the background. Step 1. Run the Internet Explorer program and enter this web address to the Address bar at the top. Step 2. Working through the program create your text Following the steps then click on Create Gif button. Step 3. Go to the top and Save the File SAVE PICTURE a. Right click on the Animated Text b. Click on Save Picture As from the menu c. Select your Folder d. Edit the Name to eg. Your business name banner.gif Congratulations! you have just created another gif file that you can upload to your website. Making banners and artwork is great fun and very useful for all types of art work for even materials that are to be printed.