Adobe Spark

Image - Adobe Spark Post, Page and Videos.
Image – Adobe Spark Post, Page and Videos.

Adobe Spark (AS) is a multifaceted tool used to create stories, graphics, and animated videos. Post your projects on the web for marketing, education, and training. Create your projects using Spark- Post, Page, and Video. Know the differences between a post, video, and page. The three applications help you to create visual content. Create posts with multiple images and find icons and images, and format text. Use different features and themes available within AS. With the software, work with animated text and backgrounds, insert videos and add music & narration. Content creation for posting on your website, social media, and educational training systems. Upload content to Spark, add videos, buttons, and links to pages.

With the premium features, build your brand by uploading logos and custom fonts to Spark. Manage the projects you have stored in AS, that include backups for contents and templates. Synchronize your content across devices such as desktop and mobile. For more information click on Optimize-images-for-web

fig 1.0 - Adobe Spark Dashboard
fig 1.0 – Adobe Spark Dashboard

Adobe Spark: Dashboard

Adobe Spark Login with your Google/ Facebook or email account. Every piece of content you create will be called a project. In the dashboard, fig 1.0 you can find the projects that have been created.

fig 1.1 - Interface
fig 1.1 – Interface

Interface

Click the +icon fig 1.0 which displays the page fig 1.1 for creating Graphics, Web Pages and Videos. The page option is like a web page hosted by Adobe Spark for you. With it make a collage of photos, videos or catalogs.

Adobe Spark: Post

Select Graphics and scroll down the page to see different template heads such as Facebook and Twitter, Instagram, For print, and Ads. Expand the ‘start from scratch’ tab fig 1.1 and click ‘Graphics’ from the drop-down options.

fig 1.2 - Select a Size
fig 1.2 – Select a Size

Next, select a size. Click on say the Pinterest box fig 1.2 that will take you to the display page for Photos.

fig 1.3 - Choose a photo
fig 1.3 – Choose a photo

Upload your photo to Adobe Spark fig 1.3 or Conduct a Search in the ‘Search for photos’ bar to find one.

fig 1.4 - Graphics Work Area
fig 1.4 – Graphics Work Area

The Graphics Work Area fig 1.4 will contain your Image on the left and the various editing options to the right

fig 1.5 - Add+ & Brandify
fig 1.5 – Add+ & Brandify

Design

Next to the ‘Design’ head in the left pane, you will first see fig 1.5 ‘Add Brand’ or the ‘Brandify’ buttons. Next click on the Add +sign and the menu will expand left side showing options for choosing from Text, Photo, Icon, and Logo.

Select the Text box to insert text to your image or double click on the Image to edit text. With the icon tab, you can search to select the appropriate one for your use from the AS library. The last is the upload logo tab from where you can upload the logo for your business. The first 3 options are free but for the 4th upload-a-logo is only for upgraded accounts.

fig 1.6 - Variations: Select a Theme
fig 1.6 – Variations: Select a Theme

Under the ‘Variations’ fig 1.6 head scroll down and select an appropriate theme for your image. The theme you select will come with colors, fonts, and other formatting options. Click on the image or text to apply the styles to it.

fig 1.7 - Color Palette Option
fig 1.7 – Color Palette Option

Colors

Style your font and background by choosing color fig 1.7 under Decorative, Modern, Bold, Elegant. The palette of colors are professionally created by designers so that the colors make sense.

fig 1.8 - Image Layout
fig 1.8 – Image Layout

Layout

Choose a Layout fig 1.8 for your image. Move the slider in the cell/ border to specify a border for your image. Slide the grey ball in ‘Move content with layout’ and choose the one you want to apply to your image.

fig 1.9 - Size
fig 1.9 – Size

Size

Give a custom size fig 1.9 for your image by specifying width and length in pixels or choose the size for your social post such as say a Pinterest size.

fig 2.0 - Style your text.
fig 2.0 – Style your text.

Type

Style your text fig 2.0 under Primary select the font, align text & capitalize. Use the slider for size, letter spacing, and opacity. Under Secondary change the font and opacity of the text. The secondary tab will delete the style.

fig 2.1 - Shape
fig 2.1 – Shape

Shape

Select a shape fig 2.1 for your text and use the padding silder to pad the shape. For example change shape behind your text. A framed text, ribbon text square, circle, banners and many other creative categories of shapes are possible. Go to any of the corners of the selection and click to drag and resize as you please the text and shape.

fig 2.2 - Text Styles: TEffects
fig 2.2 – Text Styles: TEffects

Effects

For the TEffects fig 2.2 style your text for shadow, outline, output and a combination of effects.

fig 2.3 -Text Styles: Style
fig 2.3 -Text Styles: Style

Style

Click on your text to apply Styles fig 2.3 to your Text. The round green circle you see is the style suggestion. Click on this green circle and circle around this option to see how your text will change. Find different suggestions of text as it will automatically change. And if you find exactly what you are looking for that is suitable for you then can stop there.

fig 2.4 - Style your Image
fig 2.4 – Style your Image

Image

Click on the image fig 2.4 to style your image. Use the slider to scale to different sizes or rotate your image. Use flip and incline image horizontal or vertical. Click on Replace Image and upload directly concise photos from your computer. Other options for using the images are Creative Cloud from Adobe in Lightroom or your Dropbox account, Google photos, etc. Find great photos for your backgrounds which are for free and you can use them because they have the creative commons license.

fig 2.5 - Filters
fig 2.5 – Filters

Filters

Apply a filter fig 2.5 to your image by selecting only one from the options. Move the slider to get a blur effect for your Graphics.

fig 2.6 - color fill
fig 2.6 – color fill

Colorfill

Fill the left pane in the layout with a fill color fig 2.6 to match image background. You can populate this area with text and then style it.

fig 2.7 - Images saved in Project Folder
fig 2.7 – Images saved in Project Folder

Images are saved under Projects. Share it on Social Media or hover over the image and click on (…) and select download from the dropdown options of Rename, Duplicate, Download Graphics and Delete.

fig 2.8 - Web Page
fig 2.8 – Web Page

Adobe Spark: Pages

To Create a new page click on the + sign fig 1.0. The page can be inside a website where you will get a code fig 3.9 that can embed the page to your website.

fig 2.9 - Title & Subtitle
fig 2.9 – Title & Subtitle

Title and Subtitle

Click on the first option and in the page displayed enter a title > Fashion Jewellery and subtitle > Kundan and Pearl Jewellery fig 2.9.

fig 3.0 - Photo CD
fig 3.0 – Photo CD

Photo CD

To find a photo CD, we search for fashion Kundan Jewellery and when we find one add it to the page. Note the text appears on this image fig 3.0. We have themes for pages and they decide how our text looks like on the page. The Luca theme has been selected for this image.

Next, add a new element by scrolling down to find the + option which expands showing you the different elements. As you see we can insert a photo, text, button, video, Photo grid (collage of photos), Glide-show (different photos fading from one to another and on every single photo you have text or other elements that you want to add), and a split layout.

Add a button with text and a link in Adobe Spark Pages.

fig 3.1 - Add a button
fig 3.1 – Add a button

Start with Text and say we want it centered. All the options are similar to the ones you have on your text editor. We will write the text – Kundan Jewellery and center it. Make this text a header- h1, h2 or a list or bold or a link, etc. We select the h2 option. Then we try to add new elements by pressing the + sign and say we want to add a button to a page or another website. Add a button dialog box is displayed. For button text, we enter Click here fig 3.1 and for a web address > we enter www.sapcanvas.com/affiliate-marketing/ and we align > for the center. Next, click on save.

fig 3.2 - Embedded Video
fig 3.2 – Embedded Video

Embed a Video

Further, we would like to add another element eg: a video. As above we press the + sign and click on the video fig 1.1. Here we have an option to copy a link and save it fig3.2.

fig 3.3 – Video Embed: https://youtu.be/2ySvb62iVCQ

Go to Youtube and search for eg: ‘Kundan jewellery’. Next, go to filters and look for Creative Commons as these videos can be used for different purposes by anyone. Choose a video and by going to the share button, copy the link for this video. Go back to your page and enter this link in your Add an embedded video fig 3.2 display box and save. Play the YouTube video embed by clicking the arrow mark in fig 3.3.

fig 3.4 - Photo Grid
fig 3.4 – Photo Grid

Photo Grid

Proceeding to the next element ie a photo grid. Click on the option photo grid and start adding some photos fig 2.9. So the collage will look like shown in the above fig 3.4. Also by clicking on any photo and going to editing option at the bottom, you can set the photos to a large photo. Click on save to add the collage photos to the page you are creating.

fig 3.5 - Glide Show Image
fig 3.5 – Glide Show Image

We now proceed to add the next element say a Glide-show fig 2.9. As above press Glide-show and add the photos. Next, Save and you will see how your Glide-show will look like fig3.5. In the photo, you will also see a transparent box with a + button displaying elements [such as photo, text, button, video] that you can add to your Glide-show images.

fig 3.6 - Split layout
fig 3.6 – Split layout

Split Layout

In a similar manner go to the next element and add photos fig 2.9 to your split layout and save. fig 3.6.

fig 3.7 - Image_Fill screen
fig 3.7 – Image_Fill screen

Image with a text

Finally, click in the box and add – ‘Fashion Jewellery’ and from the settings make it fill the screen fig 3.7. Preview your work before you can share the page presentation that you created with Adobe Spark. Note that the credits for the images are displayed at the bottom of the presentations along with the Made with Adobe Spark.

fig 3.8 - Publish and Share - link - https://spark.adobe.com/page/YzOawd3LHsNYb
fig 3.8 – Publish and Share – link – https://spark.adobe.com/page/YzOawd3LHsNYb

If you are satisfied with what you have in your presentation and do not want to edit anymore, you can click on the close (x) button. Click the share button and in the display box pick a category say business and press the button ‘create-a-link’ fig 3.8. You will then get a link to share. Copy and paste in your browser to view the page presentation.

https://spark.adobe.com/page/YzOawd3LHsNYb/

If you go back to your page, you will find different options for publishing on facebook, twitter, classroom, email, and embed. Copy the below code and embed it on your website.

fig 3.9 - Embed Code
fig 3.9 – Embed Code

Adobe Spark: Videos

Go to your dashboard fig 1.0 to click on the + sign and select the last item – Video.

fig 4.0 - Organize an event
fig 4.0 – Organize an event

Scroll down and choose from the different video options eg: “Organize an event” fig 4.0. The blueprint is first to create the setting. From time to time Adobe Spark makes new additions.

Title

fig 4.1 - Title
fig 4.1 – Title

Provide a title fig 4.1 for the selected video. eg: 7 wonders of the world.

Pick a Story Template

fig 4.2 - Pick a Story Template
fig 4.2 – Pick a Story Template

Press the next button and choose a story template eg: ‘Show and Tell’ fig 4.2. Different video templates promote an idea of a product or a service that you are offering.

fig 4.3 - Layout_caption_elements_icon_and_text.
fig 4.3 – Layout_caption_elements_icon_and_text.

Layout

From the top menu click on Layout fig 4.3 and select from the options eg: Caption. This is the first slide. Next, click on icon and search eg: airplane icon. Again click on the + sign and add your text eg: 7 wonders of the World [Tourist Destinations]. For the other seven slides, you can opt for different layouts eg: the ‘Split Screen’ option is above ‘Caption’.

fig 4.4 - Themes
fig 4.4 – Themes

Themes

Go to the top menu and click on Theme fig 4.4. The right top corner will have options like layout, themes, resize and music. Various templates with different theme options are available. Select the option and that will decide how your video will look like. For example, we have selected the ‘Flair’ theme with orange color.

fig 4.5 - Slides
fig 4.5 – Slides

Slides

If you scroll in the lower part you have different slides of your video. A slide-based arcade will be frame based. You have the freedom for what could be, solution or idea, reward, how you can help?. The solution or idea forms the basis to help people solve their problem. It is not mandatory to respect all of these ideas but it helps if you don’t have any blueprint for the promotional video. Take a look at all of these slides here fig 4.5. If you need more slides, add new slides by clicking on the + sign. You can drag and drop them across the layers editor. You can delete or duplicate them if you want. After creating all the slides you can edit them. Go to the right top corner and select the template layout for each slide from the various options.

fig 4.6 - Split Screen Layout: Add a photo and text
fig 4.6 – Split Screen Layout: Add a photo and text

Split screen layout – Add the photo and text elements.

Look at the second slide and press the button layout fig 4.6. Choose what type of elements you want to include in the slide. Include any one element and that can be either a photo an icon or a text. If you press on the + button you will have these options to select either of the photo, an icon or a text. In the different frames or slides add photos, images, text, and a voice over. Add the photo element to the first split screen and for the other include a text. Note that this video has been made with eight slides. The first slide is with the Caption layout while the remaining seven slides are with the split screen layout.

fig 4.7 - Slide 2 - Showing photo, text and voice
fig 4.7 – Slide 2 – Showing photo, text and voice

Voice

Slide 2 shows the addition of photo and text elements fig 4.7. Use the Voiceover by pressing the microphone button to record your voice. Keep the mouse clicked and speak to see that it will start to record. Unclick to stop recording. In the voice over a musical key will have the transition from slide to slide with different animation effects. By default the music is added to the slide.

fig 4.8 - Resize
fig 4.8 – Resize

Resize

Click on ‘Resize’ from the top right hand corner menu and select ‘Wide Screen’ fig 4.8

fig 4.9 - Music
fig 4.9 – Music

Music

The promotional video should have background music. Add your own music fig 4.9 if you have different types of soundtracks. Else, go to the menu and click on the music tab to find something suitable for your video. Use the slider to increase or decrease the sound volume of your music.

Preview, Share & Publish

Take a look of the preview in order to be sure that everything is correct. Find the preview button at the top of your video. After you are done click on X to close the display page. Click the share button or download the video to your computer.

fig 5.0 - Publish Video
fig 5.0 – Publish Video

Pick a category – ‘Business’ and add a Subtitle – ‘Tourist Destinations’ fig 5.0 and hit the button ‘Create link’ to publish your video.

fig 5.1 - Share Video - link - https://spark.adobe.com/video/fGJiPunbxCZvV
fig 5.1 – Share Video – link – https://spark.adobe.com/video/fGJiPunbxCZvV

Click on or copy the below link and paste it in the browser or view the creation by clicking on VIDEO.

https://spark.adobe.com/video/fGJiPunbxCZvV

Share the link (fig 5.1) in your social media account.

Digital Marketing Solutions

Thank you for subscribing.

Something went wrong.