2015

Lonnie Wormley

ASU ITS

3/12/2015

Digital Signs for Albany State

Contents What are digital signs? ............................................................................................................................................................ 2

What Technology is used for the ASU digital signs? ............................................................................................................... 2

Map the ASU Image Archive ................................................................................................................................................... 3

Preparing the artwork ............................................................................................................................................................. 5

Using PhotoShop to create a JPG image ............................................................................................................................. 5

Using PowerPoint to create a JPG image .......................................................................................................................... 11

Uploading artwork to web server. ........................................................................................................................................ 21

Adding image to Rise Vision presentation. ........................................................................................................................... 33

Using the Rise Vision Text Gadget ........................................................................................................................................ 39

Using the Rise Vision RSS Gadget.......................................................................................................................................... 58

Revised:3/12/2015 1 of 63

What are digital signs? 1. Wikipedia:

a. http://en.wikipedia.org/wiki/Digital_signage 2. For ASU the vision is to improve campus communication.

What Technology is used for the ASU digital signs? 1. Rise Vision

a. http://www.risevision.com/ 2. Google Chrome

a. http://www.chromium.org/Home 3. Ubuntu Linux

a. http://www.ubuntu.com/ 4. HP MP4 digital signage player

a. Specifications 5. Joomla

a. http://www.joomla.org/about-joomla.html 6. HTML

a. http://www.w3.org/html/ 7. Adobe Creative Suite

a. Photoshop b. Illustrator

Revised:3/12/2015 2 of 63

Adding Content to Digital Signs Map the ASU Image Archive

1. Map the network archive for PictureMan. a. Right Click on the Network icon in your File Explorer.

b. Type in this URL: \\crowdie\CrowdieData\PictureMan and map it to the letter P

Revised:3/12/2015 3 of 63

c. This is the directory that contains all of the images taken by the ASU photographer Reginald Christian. 2. Make a folder in your My Documents named “DigitalSigns” to store your work.

Revised:3/12/2015 4 of 63

Preparing the artwork Using PhotoShop to create a JPG image Setup PhotoShop to match the width and height of the area in the presentation that you want to image to be displayed. In this example we will be working with the ASU Three Panel Template shown below.

This image is 570 x 860

Revised:3/12/2015 5 of 63

1. Start PhotoShop create a new file and set the canvas for 570 pixels wide by 870 pixels high. Name the file without using any spaces as shown below “CampusLife01”.

2. Select an image from the Picture Man archive and drag it into the PhotoShop application.

Revised:3/12/2015 6 of 63

3. Resize the image to fill the canvas. Hold the Shift key when resizing to maintain proportions.

Revised:3/12/2015 7 of 63

4. Press the Enter key when done to complete the operation. Save your work by pressing the Ctrl+S keys and browse to your DigitalSigns folder.

5. Add text to the image by clicking on the T on the left tool bar and type in some text that describes the image or event. In this example we are just going to use the text from which the image was taken, ASU Science Life

a. Select a sans serif font like Gill Sans Ultra Bold.

Revised:3/12/2015 8 of 63

6. Add some text effects to make the words “pop” away from the image.

7. When you are done save your work by pressing the Ctrl+S keys.

Revised:3/12/2015 9 of 63

8. Export the file for use on the web by going to the File Menu and select the option Safe for Web or by pressing

Alt+Shift+Ctl+S. a. Make sure the Preset is for JPEG High

9. Save the file in your DigitalSign folder.

Revised:3/12/2015 10 of 63

Using PowerPoint to create a JPG image Setup PhotoShop to match the width and height of the area in the presentation that you want to image to be displayed. In this example we will be working with the ASU Three Panel Template shown below.

1. Start PowerPoint and select a template to begin.

This image is 570 x 860

Revised:3/12/2015 11 of 63

Revised:3/12/2015 12 of 63

2. Click on the Design tab

Revised:3/12/2015 13 of 63

3. Click on the Customize icon and select slide size.

4. Set the slide size for 570 pixels wide by 860 pixels high. a. Go to this site to convert pixels to inches,

http://www.unitconversion.org/typography/inchs-to-pixels-y-conversion.html b. 570 pixels = 5.9375 inches. 860 pixels = 8.958 inches

Revised:3/12/2015 14 of 63

5. Select the option for Sure Fit on the next screen.

6. Name the file “570x860-YOUR-INITIALS”without using any spaces as shown and save it in your digital sign folder.

Revised:3/12/2015 15 of 63

7. Select an image from the ASU Picture archive and drag it onto the slide. Or click on the insert picture icon.

Revised:3/12/2015 16 of 63

8. Browse to the picture that you want to use.

a. Arrange the image to your liking. Use PowerPoint tools to add text to convey your message b. When you are done save your PowerPoint presentation before going to the next step.

Revised:3/12/2015 17 of 63

9. You should have a slide that looks like the image below.

Revised:3/12/2015 18 of 63

10. Now we will save the slide as a JPG file so it can be used for digital sign content. From the file menu select Save As and change the default PPX format to JPG.

11. Select all slides

Revised:3/12/2015 19 of 63

12. Your JPG images are saved in a folder named after your PowerPoint file name.

Revised:3/12/2015 20 of 63

Uploading artwork to web server. 1. Make sure you have access to the ASU digital sign portal, before proceeding. Register a new account by using

the Create an account Link on the log in panel. If you have forgotten your password use the Forgot your password? Link on the log in panel. When you create a new account use your ASU email address, first.last@asurams.edu.

2. Once you have verified access with the portal administrator log into the portal using this URL: http://portal.asurams.edu/administrator/

Revised:3/12/2015 21 of 63

Revised:3/12/2015 22 of 63

3. Go to the Content menu and select Media Manager.

a. Make sure you do not make any changes to items on the other meus. If you would like to get training on how to manage the portal send an email to Lonnie.wormley@asurams.edu

Revised:3/12/2015 23 of 63

4. Once you have the Media Manager view in your browser click on the DigitalSigns folder.

DigitalSigns folder

Revised:3/12/2015 24 of 63

5. Click on the Content01 folder.

Content01 folder

Revised:3/12/2015 25 of 63

6. Click on the 570 folder. The width of the file you are uploading is 570 pixels wide so it will go in the 570 folder.

570 folder

Revised:3/12/2015 26 of 63

7. Click on the green Upload button and browse to your file using the Choose Files button. Then upload the file using the button labeled Start Upload.

Revised:3/12/2015 27 of 63

8. Be sure to select the JPG file and not any other file type.

Revised:3/12/2015 28 of 63

9. Once your file is uploaded you will see a green banner notifying you that the upload was successful.

Revised:3/12/2015 29 of 63

10. Click on your image icon so that it shows in the Media Manager.

Revised:3/12/2015 30 of 63

11. Now right click on it to get the URL for the image and select copy URL from the contextual menu.

Revised:3/12/2015 31 of 63

12. Paste the URL in a new tab in your browser to verify that it works. http://portal.asurams.edu/images/Digitalsigns/Content01/570/CampusLife01.jpg

Revised:3/12/2015 32 of 63

Adding image to Rise Vision presentation. 1. Log into the ASU Rise vision portal,

Revised:3/12/2015 33 of 63

2. Select Presentations from the top menu.

3. Select the presentation that you want to add your image. In this example we will be using the 1920 x 1080 3 Panel presentation.

Revised:3/12/2015 34 of 63

4. Right click on one of the three place holders and select properties from the contextual menu.

5. Click on any of the Add links in the list and select the Image Gadget.

Revised:3/12/2015 35 of 63

6. Paste your URL into the long field labeled URL. In this case it is http://portal.asurams.edu/images/Digitalsigns/Content01/570/CampusLife01.jpg

7. Replace the default name with a unique name including an expiration date if applicable. Change the default duration to 20 seconds.

Revised:3/12/2015 36 of 63

8. Click save and on the next panel click save. On the main presentation page use the floppy disc icon in the upper right of the window to save the presentation.

Save Presentation

Revised:3/12/2015 37 of 63

9. Use the Publish button to push your changes to the digital signs.

Publish Presentation

Revised:3/12/2015 38 of 63

Using the Rise Vision Text Gadget

In this next section we are going to duplicate the presentation shown above. We will build on the skills used in the previous sections to complete this project. The rise Vision Text Gadget is powerful and allows you to develop content with images and text directly on your presentation. You can refine your layout using HTML. We will discuss these how to use these options next.

1. Log into the ASU Rise vision portal using your Gmail Account at http://rva.risevision.com

Revised:3/12/2015 39 of 63

2. Click on the Presentation Link.

3. We are going to create a new presentation so click on the ADD button on the right side of the browser window. You will get a New Presentation window.

Click Here

Revised:3/12/2015 40 of 63

4. Before we start work on the presentation we need to select a background image for our presentation. You can create background images using any of your preferred image manipulation applications and upload them to the image server as we have done in the previous exercises. All image backgrounds are stored in the Background folder.

a. Log onto http://portal.asurams.edu/administrator/ b. Go to the media manager to access the Background folder. c. The image that we will use in this exercise is:

http://portal.asurams.edu/images/Digitalsigns/BackGrounds/1920x1080-2Panel-01.jpg

5. Click on the Gear Icon to name the presentation and add a background.

Revised:3/12/2015 41 of 63

Click Here

Revised:3/12/2015 42 of 63

6. For the Name use ASU News and your name. Then click on the Background Edit link.

Revised:3/12/2015 43 of 63

7. Copy and paste in the background URL.

Click OK twice to shave your changes.

Revised:3/12/2015 44 of 63

8. You should now have a presentation with the new background. Click on the Floppy Disk Icon to save your work.

9. Next we are going to add two place holders to display our content. Click on the Place Holder Icon.

Click Here

Revised:3/12/2015 45 of 63

10. You can visually place your place holders, but for this exercise I will give you the settings for each place holder. To name your place holder click on the Rename link.

a. Placeholder: Left i. Width: 570

ii. Height: 860 iii. Top: 125 iv. Left: 40 v. Click Save

b. Placeholder: Right i. Width: 1210

ii. Height: 880 iii. Top: 124 iv. Left: 672 v. Click Save

Click Here

Revised:3/12/2015 46 of 63

11. When you have added your two place holders you will have two thin lined boxes on your presentation.

12. You can add content to the Left place holder using the methods described in previous sections of this document. For the following exercises we will be using the Right placeholder.

13. Here is the content that we will be using. a. Image

i. http://portal.asurams.edu/images/Digitalsigns/Content01/570/DrDunning.jpg b. Text

i. Dr. Dunning recently completed three years of service as vice chancellor for International Programs and Outreach for the University of Alabama System in Tuscaloosa. He is currently a professor and senior research fellow in the University’s Education Policy Center, where he serves on state and national boards and has teaching duties in the higher education program.

ii. Dr. Dunning had a 27-year career in the University System of Georgia, including faculty and administrative responsibilities with Kennesaw State University, and senior administrative positions with the Board of Regents System Office, including vice chancellor for Services, acting executive vice chancellor, and senior vice chancellor for Human and External Resources.

c. You will be coping and pasting this information as instructed.

Revised:3/12/2015 47 of 63

14. Right Click on the Right place holder and Select Properties

15. Click on the Add link and select Text

Revised:3/12/2015 48 of 63

Revised:3/12/2015 49 of 63

Revised:3/12/2015 50 of 63

16. You will be presented with a simple text editing window. We will be adding an image and adding text.

Click Here

Revised:3/12/2015 51 of 63

17. Click on the Image Icon to add the image using the link in Section 13.a.i of this document.

In the next section we will format this image using HTML coding.

Click Here

Revised:3/12/2015 52 of 63

18. When you click on the HTML tab you will see the HTML code for the image. We are going to add image attributes to format the image to fit our layout. Copy and paste the code below inside of the image tag.

a. Before

<img src="http://portal.asurams.edu/images/Digitalsigns/Content01/570/DrDunning.jpg">

b. After

<img style="margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 0px; border: 10px solid #e4a11c; float: left;" height="840" src="http://portal.asurams.edu/images/Digitalsigns/Content01/570/DrDunning.jpg">

19. Click on the Design Tab to see the changes.

20. Click on the Save Button. 21. You should now have a presentation with the new background. Click on the Floppy Disk Icon to save your work.

Click Here

Revised:3/12/2015 53 of 63

22. Your presentation should look like this

23. Now we are going to add descriptive text to accompany the image. We will apply custom formatting using HTML methods.

a. Right click on the Right place holder and select properties to access the editing options for this content. b. Copy the text from section 13.b.i c. Make sure your blinking curser is on the right side of the image. d. Paste it next to the image.

Revised:3/12/2015 54 of 63

24. The text looks small. Click on the HTML tab. a. Add this HTML formatting at the beginning of the text:

<p style="text-align: left;"> <span style="font-family: Arial, Helvetica, sans; line-height: 36px; text-align: justify; font-size: 28pt;">

b. Add this HTML formatting at the end of the text:

</span></p>

c. Your HTML coude should look as follows.:

<img style="

margin-top: 0px;

margin-right: 10px;

margin-bottom: 0px;

margin-left: 0px;

border: 10px solid #e4a11c;

float: left;"

height="840" src="http://portal.asurams.edu/images/Digitalsigns/Content01/570/DrDunning.jpg">

<p style="text-align: left;">

<span style="font-family: Arial, Helvetica, sans; line-height: 36px; text-align: justify; font-size: 28pt;">

Dr.Dunning recently completed three years of service as vice chancellor for

International Programs and Outreach for the University of Alabama System in

Tuscaloosa. He is currently a professor and senior research fellow in the

University’s Education Policy Center, where he serves on state and national

boards and has teaching duties in the higher education program.

</span></p>

Revised:3/12/2015 55 of 63

25. Your content should look similar to this:

a. Copy in the second paragraph from section 13.b.ii and format it the same as the first. b. Your content should look like this.

Revised:3/12/2015 56 of 63

26. Save your changes and save the presentation Your presentation should look similar to this:

27. If your text is too close to the bottom of the place holder you can modify the text formatting to make it fit. a. Change the line height to a smaller value and then see if the text fits.

Revised:3/12/2015 57 of 63

b. In our example the line height is set to 36 PX. If we change it to 34 PX the text will fit. You must do this for each paragraph to make the text balanced.

28. Your presentation should look like this.

Using the Rise Vision RSS Gadget 1. We are going to add an RSS news feed to our presentation. You can select from any RSS feed that you find on

the Internet. In our example we will be using the CNN RSS feed. a. http://rss.cnn.com/rss/cnn_topstories

2. Add a new place holder using these parameters. a. Placeholder: News

i. Width: 1595 ii. Height: 65

iii. Top: 1005 iv. Left: 202 v. Click Save

Revised:3/12/2015 58 of 63

3. Click the Add link and select content

Revised:3/12/2015 59 of 63

4. Type RSS in the product search bar.

5. Click on the RSS gadget

6. Click ADD

Revised:3/12/2015 60 of 63

7. Add your RSS URL

8. For transition select Continuous

Revised:3/12/2015 61 of 63

9. Set the News fonts formatting a. Headline Font: Arial, 56px, bold, color: rgb(120, 63, 4) b. Story Font: Arial, 48px, color: rgb(0, 0, 0)

Click Here

Click Here

Revised:3/12/2015 62 of 63

Revised:3/12/2015 63 of 63