![]() So when I went to set the styles for links, 'h1' and paragraph tags, all I had to do was click the button in the libraries panel. Luckily (because I'm super-organised) I had already set my styles using the CC libraries in Photoshop, including all colours and fonts. My menu therefore, would only use anchor links to certain sections of the home page.įrom here it was just a case of exporting my assets from Photoshop and inserting them into Muse. There wasn't much of a sitemap in my instance, as it was only one page, but this is where you can create multiple pages for your website. With the header and footer created, I moved to the home page design via the sitemap in Muse. This takes some trial and error using the 'pin' and 'resize' settings in Muse. For instance, I always want my menu items to be fixed top-right of my screen, but the footer elements should stay centred. With the background colours and text inserted for my header and footer, I then had to set rules for each element so they stay in the position I want them in as the browser resizes. But unfortunately none of these were standard system fonts, and they all had to be uploaded to Muse, which is then hosted within the final export. ![]() ![]() My design only used three fonts my 'Odibee Sans', the Google font ' Raleway' and the wonderful ' Font Awesome' for icons. ![]() I then had to insert the custom fonts that I wanted to use on my site. For example, if I want a jpg at 70% quality of the original, I simply type '.jpg7' at the end of the layer! I use this feature all the time when I make email newsletters and it allows me to also control the file size of each asset. This is where you just type '.png' at the end of a photoshop layer and it creates a png file for you in a separate folder. However, I found that it was easier to prepare my assets using the ' generate assets' feature inside of photoshop, and then import them manually. What's also handy is importing your entire document as a flat guide to build on top of. You can import Photoshop elements layer by layer, which is super handy for inserting items like full-screen images, or png buttons. This contains any content that will be displayed across all pages on the site, or in our case, the header and footer. There is an excellent resource here for beginners, which guides you through the whole process of building a responsive website in Muse. With the design done, I went to Adobe Muse and started off watching the program tutorials. Also, the website would need to host my custom font, to be used as headlines across the page. It would need a little intro copy, some information about me, the designer, and a link to download the font. Obviously, I wanted the site to be responsive (look good on mobile) so I kept it as simple as possible, with a three-item menu and centred content throughout the page (no need to stack elements on smaller screens). I went to Photoshop and began laying out the design for my one page website. I made this font in one day (a one day build or 'ODB'), so making the website to accompany it in one day seemed fitting. My project would be to create a website for my font, Odibee Sans. So I decided to spend no more than a day learning to use the software, and to see if I could actually build a working, one-page website using Adobe Muse, and publish live to a domain. The worry for me was that programs like this will spit out unnecessary, bloated code, and will never do as good a job as a developer. I've always been suspicious about programs like this. Essentially, you can theoretically turn your design (done in Photoshop or similar) into a fully-functioning, responsive website, without having to write a single line of code. I've wanted to try it out for some time, as it claims to put the power of the web developer into a designer's hands. I own a copy of Adobe Muse as part of my Adobe CC subscription.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |