Art of the Apps Monthly Membership. JUNE 2018 Mobile App: Adobe Spark Post. at Scrapaneers.com. Companion Handouts

Transcription

1 Art of the Apps Monthly Membership Page 1 of 19 at Scrapaneers.com JUNE 2018 Mobile App: Adobe Spark Post

2 Table of Contents Table of Contents 2 Welcome to Art of the Apps Monthly Membership June Introduction to Adobe Spark Post & Home Screen UI 4 Lesson 1: Remixing a Template Resizing/Swapping Photo 6 Lesson 2: Understanding the Color Palette 7 Lesson 3: Working with Text 9 Lesson 4: Additional Main Screen Icons 11 Lesson 5: Creating a Post/Graphic from Scratch 12 Lesson 6: Layout Option Creating a 12x12 Page 14 Bonus Lesson: Kelly's Favorite Text/Shape Techniques 16 Page 2 of 19

3 Welcome to Art of the Apps Monthly Membership June 2018 This month we will learn all about Adobe Spark Post. Please note that these handouts are a condensed version of what is on the video. For more detailed information on how to use the app, please view the videos and refer to the handouts only as a quick reference. We ll explore the following: The app s user interface How this app can be utilized in scrapbooking How to remix pre-designed templates The app s Color Palette How to manipulate text How to create a graphic from scratch Build a pocket-style layout Many tips & tricks! Let s get SPARKED! Kelly Page 3 of 19

4 Introduction to Adobe Spark Post & Home Screen UI Adobe Spark Post is part of an integrated suite of storytelling apps Spark Page, Spark Post, and Spark Video. All three of these ios mobile apps are free and allow users to create, edit and share their visual story from any device. There is even a desktop version available. Who uses Spark Post? 1. Business Professionals 2. Educators 3. Bloggers 4. Social Media Marketers The app allows these professionals to quickly produce ads, social graphics, informational web stories and videos without a traditional graphic design department. As a mobile memory keeper, how can I use Adobe Spark Post? 1. Add text and graphics to photos 2. Create photo collages 3. Make full 12x12 layouts 4. Create filler or journal cards for pocket-style scrapbooking 5. Make graphics for your personal business or blog There are a few things you need to know about Adobe Spark in general before you begin. 1) You must sign up for an Adobe ID. There is no charge for this, but it is a requirement in order for you to use the apps. Your projects are stored on Adobe servers. So you need to set up an Adobe Account in order for you to access your projects. 2) In the App Store you are going to see options to purchase a $9.99 per month or $99.99 a year subscription. You don t need to do that. These subscriptions are geared towards those businesses who wish to customize their graphics with their Page 4 of 19

5 company logo, colors, fonts and design their graphics without having to go through an extra step of removing the Adobe logo from those graphics (don t freak out about that). BUT if you subscribe to Adobe Creative Cloud, these options are available to you at no extra cost. 3) It s crazy, but there is no undo button in this app! Developers just introduced the undo feature in the desktop version of the app, and I do believe it is in development for the app as I speak! Adobe Spark Home Screen User Interface Starting at the top of your screen: Settings Icon (upper left corner of screen): Reset hint: Prompts will appear helping you become familiar with app. Tap to turn on and off. Video Guide: Shows you various features of the app. Account Section: You can sign out of the app in this area. Restrictions: Toggle on/off whether you wish to have your project featured. Sync Projects: Toggle this on to sync your projects to your other devices where you have Adobe Spark Post installed. Template Categories: Depending on the device you are using, this will either be a static or scrolling bar underneath the Settings Icon. There are a variety of category templates. Tap on a category to view the variety of pre-designed templates and scroll up to see all available. This is constantly updated. Template Icon (bottom left center of screen): This is the icon to bring you back to the template screen. My Posts Icon (bottom right center of screen: This is home to all of the posts you created. Create Post Icon (green circle with plus sign): This will allow you to create a post from scratch. Page 5 of 19

6 Lesson 1: Remixing a Template Resizing/Swapping Photo Spark Post allows you to create graphics in two different ways: by remixing one of their professionally designed templates or by creating a graphic from scratch. We will first learn how to create a graphic by using one of the pre-designed templates and start to make it our own by resizing it and swapping out the photo. While we are remixing, we will be exploring more of the app s user interface as the screen changes with each tap of an icon. The icons will remain the same for when we create a graphic from scratch. When selecting a template to remix, look past the photo, color, font, and size of the template and focus more on the design. Even though a template may not look appealing at first glance because of the color/font/photo/size, the layout is what is important! Remixing/resizing a template: 1. Find a template you like and tap on it. The image will appear larger and then select remix and a new screen appears with the template and several icons below it. 2. Tap the resize icon. The highlighted icon on the next screen indicates the size that the graphic was created for. To create a custom size, tap custom on the far left side of the scroll bar. 3. To resize a template to a dimension of your liking, simply multiply the width by 300 and then the height by 300. So if you want to create a 6x4 graphic at a 300 resolution do this: 6x300=1800 and 4x300=1200. Your custom size will be 1800px by 1200px. Once you input the new size, note how intuitive the app is and moves the photo/text and any other graphics around to fit that new size. Swapping a photo 1. Tap anywhere on the photo. A photo icon and a trash bin icon will appear at the top of your screen and filters appear at the bottom. 2. Select the photo icon and select photo library from the drop-down menu. 3. Select photo library to access photos and albums from your camera roll. Page 6 of 19

7 4. Choose the photo you want and select done. As of right now, you are unable to third-party, cloud-based storage platforms to select photos from. You can only access photos from your camera roll or Adobe Creative Cloud storage. Lesson 2: Understanding the Color Palette There are actually two different ways to play around with color palettes in this app. One way is to access the color palette while you have the photo selected, while the other is selecting a text box. Color Palette through photo Adobe Spark Post creates a color palette for you based on the colors in your photo. With your graphic open, the color palette icon appears in the row of icons at the bottom of your screen. Using the Color Palette when a photo is selected 1. Just by looking at the Palette icon below your photo, it is still retaining the colors from the previous photo that was in the template. 2. Tap the color palette icon to access color palettes. The current color palette in use is the one with the black, bold line around it. You will also see that color palettes are organized in various sections. a. The Custom Section shows the current color palette and those that may have been previously selected. Which is why the icon looks as though it hasn't changed from the previous screen. So for instance, if you had a photo placed in your graphic and chose a color palette, but then decided to change the photo and select a different color palette, those previously selected palettes will appear here. b. The Suggested Section are the color palettes that are automatically created for you based on the colors in your photo. c. The remaining color palettes are themed: decorative, modern, bold, and elegant. Page 7 of 19

8 3. You can choose any of the palettes in your design, not just the palette that it created for you! When you select a color palette, notice how the word art on your graphic automatically changes. 4. Two small icons appear on your selected color palette. a. By tapping the bottom icon repeatedly, it will scroll through the various color combinations of your selected color palette, changing the colors in your word art. b. By tapping the top icon, a new color tool bar appears at the bottom of your screen with two tabs, Swatches and Custom: Custom: By default, the Custom tab option is open. Within this custom tab you can see the individual color swatches from your color palette. By tapping each swatch, the two color sliders below change. The first bar shows where that color is on the color spectrum and the second bar highlights that selected color along with all of its shades and tints. Specific hex colors can be input in the field at the bottom of your screen. There is also an eye dropper tool you can use to change the color swatches by selecting a color from the photo. You need to select the color swatch you wish to change, tap the eye dropper tool and then move the eye dropper over the color in the photo you wish to select. Swatches: By tapping the Swatches tab, a color tool bar appears just like it did for the Custom tab, but it is slightly different. It does show the color swatches in the selected color palette, but you do have the option of changing the colors from a simple scrolling color swatch bar here. Make sure you have the swatch selected that you want to change up here and then tap on any of the swatches in the scroll bar to change the color of that swatch. Page 8 of 19

9 Companion Handouts Using the Color Palette when a text box is selected 1. Tap on a text box and then select color from the bar that appears under your graphic. 2. The active color palette is the one with the black bold line around it and the two icons on top. These icons work the same as previously described. 3. You will notice a selection of color pairings. Scroll through the various color pairings and select one to use. Lesson 3: Working with Text The text feature in the app is what makes Adobe Spark Post so special! You are going to have fun with this feature! The Text Box 1. When a text box is selected, you can drag it to any area on your graphic you wish. 2. Yellow, dashed guidelines will appear when you have your box centered vertically or horizontally. 3. The text is surrounded by a bounding box. You can increase/decrease the text size by dragging one of the corners in/out. 4. When the text box is selected, icons appear at the top of the screen a. Text Edit Icon: tap it to edit your text. You can also edit your text by double-tapping the text box itself. b. Multi-style Text Icon: This icon appears at the top of the text box as well. It allows you to change a word or words within your text box to a different font or color while leaving the other word(s) at their original style. c. Duplicate Icon: By tapping this icon, it will duplicate your text box. d. Trash Bin Icon: Deletes your text box. Page 9 of 19

10 Text Tool Bar When your text box is selected, there is a bar with various text editing tools. If you are on an iphone, you will need to scroll to the left to see all of them. Starting at the far left: 1. Style: A large circle with a green button appears. Rotate the green circle around the track to see how this changes the style of your text and the shape that appears behind it. NOTE: If you select one of the options from this style picker and select done, there is no undo button to change it back to its original if you change your mind. Tap Cancel to back out of this text edit option. 2. Color: This was covered in the previous lesson. 3. Fonts: Fonts are divided into categories. Just tap a font to change it. NOTE: As of right now, Adobe does not allow you to add your own fonts to the app. However, they do provide a very nice variety of fonts to choose from. Below is a really good article from Adobe Spark on font pairings: And another article about how to avoid making bad font choices: 4. Shape: Awesome feature! The scroll bar breaks shapes into categories: basic, banners, decorative, and social. The active shape (if the template you are using has one) is noted by a box around it. Depending on the shape selected, you may be able to add some extra flair to the word art. If those two wavy arrows appear on the icon of the shape you selected, keep tapping it to see what it does to your font. Again, not all shapes have this option. If you want to remove the shape, select the no shape option, that is the first option in the scroll bar. 5. Align: Self-explanatory (full-justification is Kelly s favorite!) 6. Opacity: The Opacity will lower the opacity of the shape around your text if you have a shape, or it will lower the opacity of the text if you have no shape behind it. Page 10 of 19

11 Companion Handouts 7. Spacing: Pretty cool text edit tool, too! If you have several lines of text, two icons will appear when you select the Space tool: padding and line. If you only have one line of text and a shape behind that text, just the padding icon will appear. If you have only one line of text and no shape, the Spacing option will not be available. Line Icon: Tap the line icon to increase/decrease the space between the lines of text. If you have a shape behind your text, the shape will adjust slightly as well. Keep tapping the line icon and you will rotate through three or four line spacing options. Padding Icon: If you have a shape behind your text, this editing tool adjusts the border of the shape around that text. You have four padding options, and just keeping tapping the icon to scroll through them. Lesson 4: Additional Main Screen Icons When you have a template/graphic active, it does have a main screen from which you can make edits by tapping on the various icons below that graphic. We already covered Palette and Resize, but there are a few more we need to address: 1. Add: gives you the option to add another text box, another photo, an icon, or a logo (adding a logo is for subscription users). Please refer to Video 5 for more detailed information. 2. Layout: This goes hand-in-hand with adding an additional photo (or even text box) to your graphic. This feature is covered in great detail in Videos 5 and 7. Please refer to those videos for more instruction. 3. Design: This shows you some template options without having to go to the main Template screen. 4. Effects: This isn t something you would use for a photo that is going to be printed. It s geared more towards social media posts. It s kind of fun to take a photo that is to be printed in a scrapbook and add a little animation to it to share on your social media outlets. Please refer to Video 5 to see how it works. Page 11 of 19

12 Lesson 5: Creating a Post/Graphic from Scratch It may seem like it took a while to complete one graphic, but really, it doesn t take that long. Remember you are just learning how this app works and when you figure out what your favorite features are, they will become your go-to s, and your graphics will come together quickly. Described below are three ways to build a post/graphic from scratch. There is a lot more detailed information in Video 6, so be sure to watch it! Adding Text to a Photo 1. Open the app and tap the green plus sign. 2. Select a photo from your Photo Library. 3. Resize it to a custom size (refer to the custom size chart for Project Life pocket placeholder sizes). Tap done. 4. Double tap the text box that appears to change your text. Tap done. 5. Edit the fonts, shape, color, etc. to your liking, or even add another text box! 6. If you have a free Adobe Account, meaning you are not subscribing to Adobe CC or one of Adobe Spark s subscription options, you are able to remove the Adobe Watermark that appears on your graphic. To do so, simply tap on the watermark and select remove. 7. To save your graphic, tap share in the upper right corner and then select save image." Creating a Filler Card with a Pattern 1. Come back to the app s Home Screen and it doesn t matter if you are in the templates or my posts section. Tap the green plus sign. 2. From the menu, select patterns. 3. There are a ton of patterns to choose from so don t be afraid to explore! Type in a word in the search bar to see what is available. 4. When you find one you like, tap on it and it will pop up in a larger view. 5. To download the pattern, tap the little cloud icon in the corner and you will be asked where you want to save it. If it is your first time ever selecting/ downloading patterns with this app, you may see a Welcome to Market Page 12 of 19

13 Companion Handouts Screen. Just tap My Library to save your pattern. Once you do, it will appear on your screen, automatically giving you the option to resize. Once you do this for the first time, that Welcome to Market shouldn t appear. Your pattern is saved in the library of your Adobe Creative Cloud account (you get 2 free gigs) not your Photo Library on your phone. 6. Use the skills you have learned so far to add text boxes/shapes, edit fonts, colors, etc. 7. Save your graphic to your camera roll. Creating a Filler Card with a Solid Color Background and Icons 1. Come back to the app s Home Screen and it doesn t matter if you are in the templates or my posts section. Tap the green plus sign. 2. From the menu select solid color. 3. Select a color from the swatches and tap next. 4. Resize your graphic and tap done. 5. Use the skills you have learned so far to add text boxes/shapes, edit fonts, colors, etc. 6. Try something new by adding an icon! Tap add and then select icons. 7. Do a search for an icon you would like to add to your graphic. 8. Select the icon you wish to use and it will appear on your graphic. You can manipulate the size and color. Reposition the icon by dragging it to a different area on your graphic. 9. Save your graphic to your camera roll. Page 13 of 19

14 Lesson 6: Layout Option Creating a 12x12 Page Spark Post has an option to create a graphic using a layout or collage, as some users may call it. You are able to create a full-blown 12x12 pocket-style layout using this app. This is especially handy when you want something a little different than what the Project Life app has to offer. BUT, please remember that you are not able to add drop shadows or anything like that to cells (placeholders in PL lingo). Please refer to Video 7 for more detailed information! Creating a 12x12 Layout 1. From your home screen, tap the green circle and select Photo Library. 2. When you are in your library, you can select more than one photo. Choose the photos you wish to use and then tap Add in the upper right corner. Now if you select, for example 3 photos and that Add in the upper right corner says Add 2, don t worry about it. It will add all three of those photos to your layout. 3. If your photos were taken using Live Photo with your iphone, you will be asked whether or not you want to use the Live Photo for each photo you selected. Just select photo. 4. Set the custom size for your layout. A high-res 12x12 layout should be 3600x3600 px. 5. The app automatically places your photos into a collage and adds a text box. If you don t want to deal with the text box at the moment, just delete it. 6. You will probably want to add a few more cells in your layout for a filler card or a place to add text. Tap on the layout icon and browse the various layouts. 7. Select a layout and notice how the app will rearrange your photos and add a solid color to those cells that do not have placeholders. 8. To move photos around from one cell to another, simply tap on a photo and drag it to a different cell or keep tapping the layout icon and the app will randomly move the photos around for you. 9. You can pinch your fingers in and out to make the photo within the cell larger or smaller. You can also rotate the photo by twisting your fingers on the photo. Page 14 of 19

15 10. Change the color of empty cells simply by tapping on it and choosing a different color from the swatch options. 11. To adjust the border around the edges of your layout and spacing between the cells: a. Tap spacing and two sliders will appear. b. Tap the lock icon between the two sliders on the far right if you want the spacing of the border and the cells to be the same. c. Adjust the spacing by moving the sliders back and forth. d. You can also change the color of that space by tapping color and selecting a different color swatch. 12. You can also adjust the size of the cells: a. When you tap on a cell, a bar on each side of the cell will appear. b. Drag them in/out/up/down to increase or decrease their size. c. When you adjust the size of a cell, the surrounding cells will also respond and adjust automatically. 13. To finish your page, add text boxes with or without a shape behind them, icons, etc.! 14. Save your layout to your camera roll. 15. If this is a layout you are going to print from the Project Life app, place it in the full 12x12 collage template found in the collage section of the app. Creating a Photo Collage: For those of you who use the Project Life Collage section you know how those collage templates in the app don t have white space between the place holders? It drives some scrappers crazy! Why not just recreate the collage in Spark Post? 1. From your home screen, tap the green circle and select solid color. Color isn t going to matter right now, so tap next. 2. For demo purposes, resize the graphic to a 6x4 photo which is 1800x1200 pixels. Tap done. Delete the text box. Page 15 of 19

16 3. Scroll through the layout options and select one that looks similar to one you would find in the Project Life Layout. 4. Add space between the cells. Tap spacing and unlock the spacing if you need to. 5. Set the border to 0 and the cell spacing to 13 (after some experimenting, 13 seems to be consistent with the spacing in the PL app, but you are free to select whatever spacing you wish). 6. To add a photo to any of the cells, tap on one and select the photo icon at the top of your screen and select a photo from your photo library. Keep repeating for the remaining cells or change the color of the cell, add an icon or text! 7. Save your graphic to your camera roll. 8. Add your new graphic to a 4x6 placeholder in your Project Life Layout. Bonus Lesson: Kelly's Favorite Text/Shape Techniques Now that you have a solid understanding of how to use Adobe Spark Post, your head is probably spinning with ideas of how you will utilize this app in your memorykeeping projects. Below are three of Kelly s favorite techniques she uses in her scrapbooks. For more detailed instruction, refer to Video 8. Letter Cut Outs: 1. Begin a new project by tapping the green circle with the plus sign. 2. Select a photo from your camera roll or one from the free photos option as demonstrated in Video Resize it to your liking and then tap done. 4. Double-tap the text box and type in your text. 5. Change the font to a thick, chunky font and adjust the alignment if desired. 6. Tap the shape tool and select the shape that is a square with large letters (see Video 8 for the exact shape). This shape floods your photo with color, but shows the photo through your text. You can move the text box by dragging it Page 16 of 19

17 around the photo and place it where you wish. You can also change the color by tapping on the color tool and selecting a different swatch. 7. Refer to Video 8 for more instruction on how you can save your letter cut outs as a PNG! Polaroid-like Graphics: 1. Begin a new project by tapping the green circle with the plus sign. 2. Select a photo from your camera roll and resize it to a 3x4 (900x1200 or 1200x1800). Tap done and then tap done once more. 3. Throw the text box away. 4. From the next screen, select layout. 5. Tap on spacing and adjust the border to about Tap color and select a different swatch to change the color of the border. For Polaroids you would usually want them white, but a light gray was used in the video for demo purposes. 7. Tap on the photo itself to activate those resize bars on each side of the photo. 8. Drag the bottom bar up until your photo looks as though it is a square. 9. Feel free to add text boxes on your polaroid if you wish! Quotes and Lyrics 1. Begin a new project by tapping the green circle with the plus sign. 2. Select a solid color. 3. If you are going to use this in a Project Life layout, resize this graphic to something big (if you are using a large amount of text)-maybe a 6x8 (1800x2400) or a 6x12 (1800x3600). These placeholders are found in the Project Life Big Shot Templates. 4. Double-tap the text box and type in your text. It is helpful if you have the text you wish to use typed out in Apple s native Notes app. That way you can just copy and paste into the text edit tool in Adobe Spark Post. Please refer to Video 8 for a detailed explanation of breaking up the text on two different lines. Tap done. 5. Adjust the size of the text box to enlarge it by dragging one of the corners. 6. Remove any shape that may be behind the text. 7. Change your font if you wish. Page 17 of 19

18 8. Tap on Align and set the alignment to full justification. 9. Change the color of the text if you wish. 10. Tap on the multi-style text icon at the top of the screen or top of the text box. Multi-style text will allow you to change the color or even font of selected words in your text box. Please refer to Video 8 for more detailed instruction. Page 18 of 19

19 Inches to Pixels Photo or Placeholder Size in Inches Photo or Placeholder Size in Pixels 3x4 4x6 6x8 4x12 6x12 8x12 2x2 4x4 6x6 12x12 900x x x x x x x x x x3600 For any other size not listed, use the following equation to convert inches to pixels for a high resolution graphic: Width in inches x 300 and Height in inches x 300 Example: 8 x 8 photo = 2400 pixels x 2400 pixels Page 19 of 19