Hello - I am relatively new to Rise and have just seen an article (Rapid E-Leaning Blog https://blogs.articulate.com/rapid-elearning/deconstructing-simple-visual-design-e-learning/) where Tom inserts images into a button stackable block. I have looked everywhere trying to find how the image is inserted?? Or is it a storyline interaction made to look like a block? Help??
I think what has been done here is to use a number of different blocks to create each individual menu item.
What I have done in this example is to recreate Tom's menu item using an Image and Text block, where the image is the character, background and text ("An Unfinished Job") on the left, with the text ("Learn how to work . . .") on the right. This is then followed by a Button block, where the description has been removed. Finally, the menu item is finished off with a straight line divider.
Hope this helps and apologies to Tom if I got it wrong !
It's a cool effect. I saw a demo from someone at the UN and at first glance I was trying to figure out the same thing: how'd they get the image in the button stack. So credit for this goes to them.
Thanks for including the tip about the padding. I was wondering why your version appeared a bit sleeker than mine and now I know ! I never normally worry about the padding, but this is a simple example of how it can be put to good use.
You're right, it is a really cool effect and looks particularly good against the white background, so thanks for sharing.
Hi Tom. I set the blocks per the above instructions and my graphic artist created the images per the above guidance, but the buttons still seem far away from the text above it. See attached image. Any other tips would be appreciated. Thank you!
You can modify the padding for the blocks. For example, I'd put 0 padding at the bottom of image/text block and 0 padding at the top of the button block and that should pull them in closer
I really like this look, but the steps to get there seem daunting. I'm trying to re-create this and getting tripped up on creating the right image (assume you're using PowerPoint). I used a custom shape for the "button", cropped the character at the bottom and tried to align the bottom of the character with the bottom of the shape, but the result isn't very clean.
How did you make it appear that the character is "inside" the button at the bottom of the shape, but not the top? Also, how do you get the image to 6:1? I tried grouping the objects (character, shape and text) and resizing the whole thing, but there doesn't seem an easy way to change the aspect ratio (see attached) to get the image to the size you mentioned. Any chance you can elaborate a bit on your process for this?
12 Replies
Hi Hannah,
I think what has been done here is to use a number of different blocks to create each individual menu item.
What I have done in this example is to recreate Tom's menu item using an Image and Text block, where the image is the character, background and text ("An Unfinished Job") on the left, with the text ("Learn how to work . . .") on the right. This is then followed by a Button block, where the description has been removed. Finally, the menu item is finished off with a straight line divider.
Hope this helps and apologies to Tom if I got it wrong !
Oh I see - thank so much!!
Ned's got it right. It's two blocks.
I remove the bottom padding for image/text block and the top padding for the button stack block.
I also try to create an image that is no taller than 2-3 lines of text. I've settled on an image that is 6x1. That works for the most part.
It's a cool effect. I saw a demo from someone at the UN and at first glance I was trying to figure out the same thing: how'd they get the image in the button stack. So credit for this goes to them.
Hi Tom,
Thanks for including the tip about the padding. I was wondering why your version appeared a bit sleeker than mine and now I know ! I never normally worry about the padding, but this is a simple example of how it can be put to good use.
You're right, it is a really cool effect and looks particularly good against the white background, so thanks for sharing.
Is the button block used to move from page to page?
Hi Nancy! You can use it to jump to other spots in the course. Here's more information on button blocks.
Hi Tom. I set the blocks per the above instructions and my graphic artist created the images per the above guidance, but the buttons still seem far away from the text above it. See attached image. Any other tips would be appreciated. Thank you!
You can modify the padding for the blocks. For example, I'd put 0 padding at the bottom of image/text block and 0 padding at the top of the button block and that should pull them in closer
Hi Tom,
I really like this look, but the steps to get there seem daunting. I'm trying to re-create this and getting tripped up on creating the right image (assume you're using PowerPoint). I used a custom shape for the "button", cropped the character at the bottom and tried to align the bottom of the character with the bottom of the shape, but the result isn't very clean.
How did you make it appear that the character is "inside" the button at the bottom of the shape, but not the top? Also, how do you get the image to 6:1? I tried grouping the objects (character, shape and text) and resizing the whole thing, but there doesn't seem an easy way to change the aspect ratio (see attached) to get the image to the size you mentioned. Any chance you can elaborate a bit on your process for this?
I just stumbled upon this step-by-step video which looks like just what I needed! You're my hero, Tom! https://blogs.articulate.com/rapid-elearning/powerpoint-tip-graphics/
Was just about to send that link. Glad it helped.