Join Nigel French for an in-depth discussion in this video Create thumbnail buttons, part of Designing a Portfolio Website with Muse.
- [Instructor] Having created our tightly cropped…iconic thumbnail images, it's now time to…put them on the homepage,…and make them into buttons, so I'm coming to the homepage,…and I'm going to scroll down to the Work section.…I'll choose my Frame tool.…At this my largest breakpoint, 1,200 pixels wide.…I'm going to make each of these thumbnail buttons…a 230 pixel square.…So I'll just click and drag to create a square,…holding down the Shift key as I do so.…
Come to the Transform panel.…Make sure that the chain is not broken,…and we'll type in 230 as the width,…and the height will be proportional to that.…Just so that I don't lose it, I'm going to…apply a color to it,…and now I'll duplicate it.…Holding down the Alt and Shift keys,…or Option and Shift keys.…Just want to make sure that these are…perfectly lined up, which I don't think they are,…so I'm going to come to my Align panel,…and I want to Align to Key Object.…
There's my key object,…and I want to distribute spacing,…and have the spacing at zero, okay.…With them all selected,…
Author
Nigel French
Released
3/15/2017- Starting a new portfolio website
- Making a header and footer
- Adding navigation
- Including social media icons
- Adding an autoplay slideshow
- Making thumbnail images and buttons
- Creating an About page and a Contact page
- Linking pages together
- Creating an accordion menu
- Adding breakpoints for responsiveness
- Testing and publishing a website
Skill Level Intermediate
Duration
Views
-
Introduction
-
Welcome1m 15s
-
Technical considerations1m 2s
-
-
1. Plan Your Portfolio
-
Find inspiration1m 50s
-
Consider a template1m 17s
-
Create a wireframe1m 30s
-
2. Set Up Your Site in Muse
-
Start a new site6m 29s
-
Choose a color palette4m 59s
-
Set typography styles5m 59s
-
Establish a grid5m 26s
-
Header and footer setup4m 22s
-
Add navigation5m 29s
-
Add social media icons7m 57s
-
Block out content regions4m 38s
-
Set page anchors4m 41s
-
Add an autoplay slideshow2m 34s
-
-
3. Display Your Work
-
Prepare your assets11m 49s
-
Create thumbnail images5m 25s
-
Create thumbnail buttons4m 24s
-
-
4. Add Pages
-
Set greeting4m 10s
-
Create an About page4m 29s
-
Create a Contact page7m 45s
-
Set project captions2m 36s
-
Link pages together3m 14s
-
-
5. Make Your Site Responsive
-
Breakpoint considerations5m 12s
-
Set breakpoints4m 58s
-
Set tablet breakpoint2m 18s
-
Create an accordion menu7m 27s
-
-
6. Publish the Site
-
Test your site2m 22s
-
Publish your site1m 56s
-
SEO considerations4m 9s
-
-
Conclusion
-
Next steps38s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Create thumbnail buttons