26 Hit File Export to bring up the Export Settings pop up window 27 Select PNG

26 hit file export to bring up the export settings

This preview shows page 21 - 24 out of 26 pages.

26. Hit File > Export to bring up the Export Settings pop-up window. 27. Select PNG if it's not already selected and push the Export button at the bottom of the window. 28. Navigate into cs1033/lab03/images and save the file with the name logoPNG.png. 29. Repeat the File>Export steps above but this time choose JPEG format and name it logoJPG.jpg.
Image of page 21

Subscribe to view the full document.

22 30. Repeat the File>Export steps above but this time choose SVG format and name it logoSVG.svg. 31. In the Windows File Explorer, navigate to cs1033/lab03/images . You should see the 3 logo files there among other images. 32. Open Google Chrome in another window. 33. Drag logoPNG.png into Google Chrome and drop it in the open tab. 34. Open another new tab in Google Chrome and drag logoJPG.jpg onto this new tab and drop it. 35. Open a third tab in Google Chrome and drag logoSVG.svg onto this new tab and drop it. 36. Chrome should now have 3 tabs open, one with each of the different logo formats. Click into each tab one at a time to see the finished images. Look in the title property in the tabs and see that the JPG and PNG ones show the image size (300 × 300) but the SVG does not show a size. You will also notice that the SVG logo fills the browser window while the other 2 formats are fairly small in the browser. 37. In the PNG and JPG tabs, click the magnifying glass icon near the top of Chrome and push the + symbol to zoom in until the image fills the browser window (probably around 250% to 300%) 38. Now the 3 images should look roughly the same size, but notice that that the PNG and JPG are blurry and pixelated while the SVG is perfectly smooth and clear. 39. The reason for the difference between SVG and the other formats is that SVG is a vector graphic (SVG stands for Scalable Vector Graphics) meaning it is composed of lines, points and mathematical formulas that draw and redraw as you resize the geometric shapes rather than a grid of pixel cells. Because of this, the vector graphics don't have any set size and don't lose quality if they are made very large unlike their bitmapped/raster graphic counterparts. 40. Go back to the File Explorer and click on the View tab. Make sure that Details is picked for the layout and File name extensions is checked as show below:
Image of page 22
23 41. Now look at the file size of each of these 3 logo files. 42. In the File Explorer, right-click on logoSVG.svg and select Open with > Brackets. If for some reason Brackets isn't an option, you can alternately open it with WordPad or NotePad. 43. The entire image is composed of just a few shapes and they are all encoded there mathematically. Some of this file may look like gobbled-gook but you will see the layer names, RGB colour codes, and sequences of numbers that look confusing but are really just representing the size and location of the shapes. 44. Go back into Affinity and make sure act_4 tab is selected and you can see your logo.
Image of page 23

Subscribe to view the full document.

Image of page 24
  • Fall '13
  • Computer file, Vector graphics, Scalable Vector Graphics, vector graphic, Options Bar, Ellipse Tool

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Ask Expert Tutors You can ask 0 bonus questions You can ask 0 questions (0 expire soon) You can ask 0 questions (will expire )
Answers in as fast as 15 minutes