Adobe Muse and I…

Ok, so the other week – I met Adobe Muse (code name). What happened between us? Check it out –
This site took me 3hrs to build. I’ve been tweaking content since then, but getting the site itself up and running was a codeless breeze! – “I’m excited!”

To break it down – Adobe Muse allows you to “Create websites as easily as you create layouts for print. You can design and publish original HTML pages to the latest web standards without writing code. Now in beta, Muse makes it a snap to produce unique, professional websites.” – Adobe.
And its free for you to download and use right now! Get Adobe Muse

The catch? Well you’ll have to pay for it next year of course (which I WILL be doing regardless of its price), and it really helps to have some prior knowledge of photoshop. But seriously, once you’ve designed your beautiful mockup in Photoshop – that’s the hard part done! And no need to waste time trying to get your sliced images to cooperate in html, placing all graphics is as simple as drag and drop – its childsplay!

Lets run through how Muse has helped me, and some practical applications for creating a VERY ‘unique website’.
As you may have noticed – my homepage sheet is a circle. If you can find another example of a completely round webpage layout do share, I havent been able to find any. As far as I know, I am the first=)
To create my homepage in html, all I needed to do was –

  • Import my original photoshop mockup .psd file
  • Click on the image buttons, and define their destination link that appears automatically in the upper toolbar (page 95% done)
  • Click on the text tool icon, click n’ drag the size I want it down below, and type “Copyright © DesignaBoy 2011. All Rights Reserved.”
  • Go to facebook like plugin page fill out the form n copy the code it spits out.
  • Go object>>Insert HTML, paste, then click once where I want it to sit.

By this point I was getting very excited. Due to my love of Photoshop – this tool is completing my life! I always thought software should be able to code for me without eliminating all creative freedom. Once ive created my lovely mockup in Photoshop – thats roughly 70% of the website done.
I’ve only just scratched the surface, and its still in beta!

Grant it, the homepage is almost pure image, so heres the skinny on a content page with gallery. Back in photoshop I exported the menu and circle center, keeping the buttons on separate layers I imported that straight in maintaining their transparency. For the background, transparent png page shadows, all you do is –

  • File>>Place, select your image, and click once where you want it.
  • Background, righclick>>Lock, and its now a background.
  • Footer image, check the ‘Footer’ box on the upper toolbar if it is not automatically checked due to where you placed the image on the page (Muse is awesomely intelligent)

For the twitter widget, and text content, same as the home page –

  • Text box – select the text tool, click and drag where and what size you want it, then type
  • Twitter widget – Fill in the details and grab the code from the Twitter widget page, Object>>Insert HTML, paste, click once where you want it

And that clean thumbnail/gallery slideshow?

  • Object>>Insert Gallery>>Thumbnails/Light Box/Basic, click once where you want it.
    Inserting your own images – Click on the small blue play button beside the gallery, click ‘Add Images’ in the pop-up and browse for your own.

All three options nicely customisable, just click and drag to rearrange where the thumbnails, next/prev, image title appear. Want a border or something else to set it apart from all the other adobe muse site galleries that will be all over the place soon? Just whack one up in photoshop and place it behind the gallery, very easy as this gallery itself has no style.

Time is money, and Adobe muse is the biggest timesaver I’ve seen in this industry yet. Not to mention the cross-browser/platform compatibility peace of mind is invaluable. I don’t care what they charge for it later, I wont be able to afford NOT to buy the final version.
So go Get Adobe Muse, learn it in no time flat, save yourself loads of time on your next simple/creative webdesign project, and give adobe some feedback if you have any ideas for its development.