Angel Larson Design

Tag: adobe

  • The Nature of Images – Modes of Pictorial Signification

    -Angel Larson

    Images Come in Different Modes

    The correct mode you should use depends on the kind of message you are creating and how you want the viewer to interpret it

    Icon

    Icons should be used when you want to literally represent the subject or idea in a way that will be descriptive and straightforward to the viewer. A photograph can be used as an icon if it exactly represents the subject matter.

    https://www.indiamart.com/proddetail/outdoor-advertisement-service-10438338773.html

    This ad uses icons in the form of the cleaning bottles. Instead of using an actual image of cleaning products, a simplified graphic reduction is used. This helps to tell the viewer what that ad is about right away and backs up the headline, “Squeaky Clean Services.” I did think that the cleaning products do remind me the most of a laundry detergent bottle, so this might confuse the message a
    little bit.

    Indexical Sign (Index)

    Indexical signs (indexes) are visual signs that point to a signified object indirectly. For example, an image of a tree with the leaves falling might be pointing to autumn.

    Nike Marketing Strategy: Ads Tactics To Build A Timeless Brand


    This ad uses imagery of an open road as a background to help point to and signify the message about what kind of people use Nike shoes. If the image only had a runner without the background it has, the meaning and emotions of the ad wouldn’t be communicated the same. The open road background signifies that Nike is, “natural,” “rugged,” and, “adventurous.” 

    Symbol

    Symbols are used when you want the information or idea to be more open-ended for the viewer to interpret. Symbols are interpreted differently depending on the cultural, social, and historical context that the viewer may or may not be aware of. Therefore, symbols must be used carefully to achieve the desired effect on the viewer.

    https://medium.com/@eprovost7509/the-effectiveness-of-advertisement-f79203834aa6


    This ad uses a large, red, graphic swoosh to symbolize the lipstick on a social, historical, and cultural level. The large red swoosh goes with the icon photograph of the lipstick container as well as a lady wearing the lipstick to add deeper meaning and significance to the ad. To me, the large red swoosh physically represents the color and texture of the lipstick but also conveys feelings of lust, love, passion, romance, boldness, and rich velvety color. This meaning is interpreted differently by the viewer and their unique experiences and knowledge of colors, shapes, and forms.

    Supersign

    Supersigns combine icons, symbols, and/or indexes to create a more layered and complex meaning.

    https://www.shutterstock.com/image-vector/instant-milk-tea-poster-ads-paper-1336297562

    This ad uses a mix of icons, indexical signs, and symbols to create enhanced meaning. A photograph icon of the teacup is used to literally show what the product is. A symbol of the shape of steam is used that has an indexical image of fields with green leaves and a sunny sky in nature to connect the idea of where the tea came from with symbols of warmth, sunniness, and nature. These different forms of image representation combine into a supersign. The literal image of the teacup juxtaposed with the symbol of the feelings they want you to associate with their tea combines to create a more complex message for the viewer to decode and experience.

  • The Importance of Math in Design

    Design is a very creative field, but it also uses math, logic, and reason to aid in designing. For example, a flyer, advertisement, banner, poster, etc. will all be designed within the dimensions of a page. A common dimension for a flyer would be 8.5″ x 11″ (8.5 inches wide and 11 inches tall) This is the common size of a sheet of paper. Print advertisements and posters are more likely to be in custom sizes that require a more specialized printer.

    You can also have dimensions of design in terms of pixels. Pixel sizing is used when you are creating a design that will be displayed on smartwatch, phone, tablet, TV, and computer screens.

    Sizing and math is important in terms of the photos you use in your design, the font size, and the sizes of shapes. From small to large sizing there are different challenges you will face with your designs.

    Designing on small dimensions means that you will have to make sure your design can still be read and noticed. You may have to have less elements in your design, because there is not as much space to work with. Larger designs mean that the elements must be much larger. You also have to take into consideration how close the viewer will be when looking at your design. If they are going to be looking at it from close up (1-2 feet away) you can get away with making the text very small. If they are going to be looking at it from a far distance and for not very long (for example a billboard on the side of the road) you will need to make the elements very large and easy to take in at a glance.

    Sizing is also very important to consistency in your design. You must develop a method to the sizing of your type, shapes, and images. For example you may have a specific size to use for the main heading, sub headings, body copy, and captions within a single design that you will want to stick to.

    If you want an element of your design like an image to take up 1/3, 1/4, 1/2, 2/3, or 3/4 of your design space, you can figure this out easily by taking the total length or width of your design and applying the fraction to it. For example, if a graphic you are making is 400 pixels tall and you want the image to take up 3/4 of the space, take 400 divided by 4 (100) and than multiply that number by 3 (300). So to for the image to take up 3/4 of the space vertically it would need to be 300 pixels tall.

    This is how you can use a basic understanding of math to help aid you in your designs.

  • From Inspiration to Creation

    To develop creative ideas, it can be useful to find inspiration in movies, TV shows, songs, images, and other creative works that you enjoy. Without copying something that has already been created, there are many things you can learn from the creations of others.

    I used to love to create fan-art, based on TV shows that I enjoyed. The shows inspired me to develop something new, based on a creative concept that already existed. Especially when It comes to drawing people or creating things based on real life, it is good to do your research to make sure you are accurately portraying what you want to portray with your own twist.

    Creativity is about having a spark of an idea, planning out the idea, and executing it.

    1.) The Spark
    In my Motion Graphics class last year, we were tasked with creating a kinetic typography video based on a movie quote. The first thing that popped into my mind was the iconic scene from Star Wars Revenge of the Sith, were Obi Wan is having an emotional speech directed at Anikin. I felt that this scene would be perfect to use as it has so much meaning and emotion to me. I instantly had ideas on the type of fonts, backgrounds, and effects to use to aid to the heavy emotion of the scene.

    2.) Planning the Idea
    The next step after the spark of inspiration was to plan out my idea. I created a storyboard to help me visualize what i wanted to happen with each phrase. Planning out what fonts, colors, and imagery you will use in your project is essential to aid you in executing your idea.

    3.) Execute the Idea
    I created the video using Photoshop for backgrounds, dafont to find fonts, and Adobe After Effects to create the 2D animation and bring everything together. I do not own the rights to the sounds used in the video. It is for educational purposes only! This project was still fun and rewarding though, to bring one of my favorite quotes to life with my ideas. You can watch the video I created by using this link to view it on Youtube.
    https://www.youtube.com/watch?v=n9NJSSQwVFE

  • Designing an App with Adobe XD-Part 8

    Now that you have created the content for your app or website in photoshop and created a shared library with your assets, you can bring everything into Adobe XD.

    Adobe XD is used for designing, prototyping, and sharing app or website designs.

    • Designing
      • With Adobe XD, you are able to have all the different screens (pages) of your app or website all in one place.
      • From the sign-in page, profile, settings, home page, etc., you can have a clear view of all the content that will be on your app or website.
      • You are able to design the content of the pages within Adobe XD, or you can design your content in photoshop and import it into XD as layers. Designing your content in photoshop and then importing it into XD can save you time.
      • Adobe XD works similarly to other Adobe apps in the ways that you can utilize properties, layers, effects, and share libraries.
      • You will want to create a separate page for every button that is clicked in your app or website and every option that is possible to the users.
      • In XD you are able to gain ready made assets or look at examples of other layouts by going to file > Get UI kits. Here you can download already made examples of apps and websites in XD to help to gain icons, and ideas for text sizes, and what pages you will need.
    • Prototyping
      • What makes Adobe XD special is that you can link your pages together to see what button will lead to what outcome. For example, if you click next on an app or web page, it may lead you to a new page, a new box, or make something pop up.
      • You have freedom to decide where the buttons will lead to give your users options while using your app or website or create navigation.
      • You can also press the play button so that you can press the buttons for yourself and make sure they are having the desired effect.
    • Sharing
      • In Adobe XD you can share your website or app prototype through a link. This will allow a potential user, employer, or developer to see your idea and comment on it.
      • Because you are sharing a link, if you update your website or app prototype after sharing it, you can press update link and the link you sent will be updated without having to send a new link.
      • If you send the link in developer view, they will be able to see what assets where used on each page. (colors, font family, font sizes, shapes, images etc.)
      • Adobe XD is perfect for bringing your idea to life so that people can see it before it is coded, and to help make the coding process faster and easier.

  • Designing an App with Adobe XD-Part 7

    Now that you have created a style guide for your app or website, you can start to create the actual content that will be used in your app. This step combines the sketches and assets you have gained to start to bring your vision to life.

    An easy way to do this effectively is with photoshop. The layers in photoshop will show you each individual asset being used in your composition.

    1. Create a photoshop document in the size that the phone/tablet screen of your app or screen size for your website will be.
      • This will make sure that your elements are the exact size, color mode, and resolution they need to be to bring into Adobe XD for your prototype.
      • Make sure your document is in RGB mode and your elements are 72 pixels per inch.
    2. Recreate your sketches, using the elements from your style guide.
      • Recreate each page in your sketches, using text boxes, shapes, images, icons, textures, and colors to bring your ideas to life.
      • Make sure that you use guides to make sure that elements that are in the same place in more than one page are in the right spot. You can use the paste in place option to make sure that elements you copy from one page are in the same exact place in another page.
      • You will not be able to add your videos or sounds at this time but you can save those in a specific folder so that you know where they are. Make sure that all your images, videos, and sounds are made by you, royalty free from online, or properly credited to the person who made them. For things like a keyboard for mobile apps, you can just go online and find an image of the keyboard that will be used to simulate what it will look like when it pops up. There are certain icons that you will be able to get from Adobe XD UI kits, or you can make them yourself.
      • You may want to create separate documents for each page of your app or website, or create them on multiple art boards within the same document.
    3. Add all your elements to a new shared library, specifically made for your app or website.
      • This will help you access your assets easily.
      • Shared libraries in Adobe can be used across different apps.
      • Name all the elements in your library as you go so that you can easily find them later. Do not skip this step! it will help you stay more organized and save you time down the line.

    Once you have your content designed in Photoshop, you can easily import the files into Adobe XD.