Advanced: Bootstrap to Adobe Muse

Muse For You - Advanced - Bootstrap to Adobe Muse - Adobe Muse CC

Complete Tutorial on How to Build a Bootstrap Template in Adobe Muse. No Coding Skills Required.

Muse For You - Adobe Muse CC Adobe Muse CC Logo

Bootstrap is one of the more popular methods of creating a website with code. In the above video tutorial I go over how to create a Bootstrap template in Adobe Muse. No coding skills required. The steps are as follows:

1. Find a Bootstrap template to re-create.

2. Take a picture of the website across different breakpoints with the Fireshot Webpage Screenshot Chrome extension.

3. Create breakpoints in Adobe Muse.

4. Decide if website is going to be fixed width, fluid-width, or adaptive.

5. Create guides in Adobe Muse.

6. Add elements and assets. Sample fonts with the WhatFont Chrome extension.

Muse For You - Advanced - Bootstrap to Adobe Muse - Adobe Muse CC

7. Add animations and effects.

8. Repeat process for other breakpoints.

For more video tutorials and widgets for Adobe Muse visit

Happy Musing :).

Read More at Advanced: Bootstrap to Adobe Muse

Read More…

Workflow Tips For Web Designers & Frontend Developers

dev workflows

There is no single right workflow to build a website. But there are ways to improve your workflow and make your job a little easier.

Whether you design or write code there’s usually some part to the process that can be streamlined. This can change depending whether you work solo or in a team environment. But if you know how to tweak your process you can get projects done faster with fewer manual tasks.

In the past we’ve covered responsive workflows and in this post I want to share common design & dev workflow optimization strategies. I’ll offer tips and resources for the creative process and help web designers & developers build their projects with more accuracy and precision.

Starting with a Wireframe

It’s a good idea to start with a wireframe on every single web project. This helps you flesh out ideas for the content, the layout style, and the organization of page elements like the logo, nav bar, and CTA buttons.

Your initial goal should be to construct a rough layout using lo-fi wireframes. Keep them quick and loose. You’ll save time on bad ideas and laser in on the good ones.

If you need some wireframe templates to get started I recommend Noupe’s gallery full of digital wireframes.

But I personally prefer working on paper with pencil for quick sketching. It’s my top recommendation for anyone who wants to rapidly prototype wireframes from scratch to get ideas down quickly. Erasing is much easier on paper and you have much more control over the whole sketching process.

designing website sketches

Don’t be afraid to put down 10 or more different wireframe ideas. I never get it right the first time and I don’t think any other designers do either.

If possible try to get your final wireframe precise before moving onto a mockup.

This way you have less guesswork down the pipeline and each stage of development just further clarifies your original concepts.

Planning Copy & Behaviors

Once you roughly know how the site should look you can start getting into the details. This can start with a mockup but I prefer building a higher fidelity wireframe first.

This involves placing sample widgets and web copy into the wireframe that looks good and guides users down the page.

This is a difficult task and it’ll be slightly different for every project. But you should think about what your users want to do and keep this in mind the entire time.

Also consider usability and how your written copy can affect the user experience.

There is no single correct way to write content. But the writing should be compelling and guide users further into the site.

digital wireframes design

While planning high-fidelity wireframes it helps to add image placeholders along with written copy. This way you can see how the layout could eventually look without using filler content.

But also consider the value of large headings and custom styled page copy like bulleted lists. Your title text draws users into each section and you often have just a few seconds to capture their attention.

Always work around two concepts when designing page text: clear contrast and plenty of whitespace.

You don’t need to choose a font face or text color during this step. If your wireframe is easy to skim it should be obvious at a glance.

Understanding user behavior makes it easier to build copy that helps users get around the site. This high-fidelity/light mockup is probably the most important stage because once you get into the full mockup design you’ll already know the layout is readable and easy to use.

Trust Frontend Frameworks

There’s a lot of buzz surrounding frontend development frameworks. These mostly include libraries like React, Angular, and Ember.

All of these can save time when building a new site, assuming you know how to use your framework of choice. The goal isn’t just to streamline frontend development but to also architect your whole website. Check out this thread to learn a bit more.

The primary goal of any framework is to separate complex functions and help you build more with less code. Modern JS frameworks handle user input and control how data gets transferred from the backend to the frontend.

The new Angular 2 release does this well and has garnered a lot of attention.

But I’ve really grown to appreciate the detail in Ember.js which comes out of the box with features for routing and asynchronous behavior. The Ember learning curve is steep but with the right learning resources you can move quickly and might even enjoy the learning process.

The biggest upside of a framework is modularity when it comes to building a new project.

You’ll know exactly where to start, how to scale, and how to organize new files with the same structure. Architecture is just as important as how you write your code.

If you’re curious to learn more check out this guide to see how other devs implement frontend frameworks into modern web projects.

Testing & Debugging

I first started writing code when IE6 was still popular. If you don’t already know, web developers have some discontent for Internet Explorer.

Browser quirks are far less common these days but they do still exist. For this reason testing should still be a big part of your dev workflow.

Beyond major browser bugs you’ll often have minor differences between how certain browsers render margins, patterns, box sizing, and similar properties in browser engines like Gecko vs WebKit.

One way to test is to have all these browsers on your development computer. After you make big changes to your code just check your work in all browsers. However this can get annoying quickly.

Instead try using browser testing tools that’ll save time and frustration. Here are some of the most popular choices:

I’d also recommend that developers add responsive testing tools into their workflow.

This helps you test each major breakpoint in a responsive layout without needing to constantly resize and switch the browser.

My two favorite extensions are Responsive Web Design Tester and the Viewport Resizer. Both are completely free and work great for live testing.

Another tool I highly recommend is the in-browser debugging console. This is great for testing JavaScript code and looking for potential errors in your HTML/CSS code validation.

chrome console logging in browser

Google has an entire guide to the console window teaching how to get started and what each of the panels does.

All of these tools are incredibly valuable to the debugging process. But each developer will fall into their own workflow so it’s up to you to decide which tools offer the most value.

Wrapping Up

There is no single proper way to build a workflow on the web. But there are best practices and techniques that you can adopt to make the process smoother and easier to manage.

I hope these tips can help shape your workflow both on the design and development side. It’s now much easier to build and launch a new website, so if you’re constantly launching new projects these little tips can make a world of difference in the long run.

Read More at Workflow Tips For Web Designers & Frontend Developers

Read More…

Responsive Foundation Framer: Responsive Design Made Easy

Festival Theme

There are a good number of front-end editors out there when it comes to responsive design. Some are based on Bootstrap, others on different frameworks, and so on. However, most of them suffer from the same problem — they lack absolute control and originality. As such, most responsive design webpages tend to look similar in nature.

If you have ever experienced the same problem, consider it solved. Meet Responsive Foundation Framer, a unique solution by CoffeeCup that gives you absolute control over your design and at the same time, helps you create intuitive and responsive design without coding.

Responsive Foundation Framer: Responsive Design Made Easy

What is Responsive Foundation Framer?

Responsive Foundation Framer is a visual front-end editor with a solid grid system and custom predefined styles. It is based on the Foundation 6 framework., therefore, Responsive Foundation Framer is minimal, modular and lets you combine elements and styles with ease.

Responsive Design

To begin with, Responsive Foundation Framer lets you harness the full power of CSS without having to deal with even a single line of code! You can specify the dimensions and run through the customization options and it will generate the required CSS code all by itself. Similarly, you can use the color picker to manage the color palette and the inline editor as well as the clickable controls to handle typography. Responsive Foundation Framer plays well with Google Fonts.

But what about content? Well, you can place your content wherever you want it, be it absolute positioning, float or using the Flexbox controls. You can layer multiple backgrounds and structure different layouts all in the matter of a few clicks! Plus, you can use the Picture element to serve different image sizes to your users on the basis of the device that they are using.

Considering the fact that Responsive Foundation Framer is based on Foundation 6 framework, it comes with the advantages of the Motion UI. You can, therefore, easily create animations and transitions with the help of data attributes.

That’s a rather strong list of features, isn’t it? But how does it fare on practice? Let’s put Responsive Foundation Framer to test and see what it can boast of.

Responsive Design: Responsive Foundation Framer Sneak Peak

Most of the action in Responsive Foundation Framer happens by means of components. It comes with its own set of prebuilt and readymade components that you can make use of. Accordions, navigation menus, tab panels, modals, etc. are all there and you just need to click to insert. More importantly, you can create your own interactive components with the help of HTML elements and CSS mixins.

Also, Responsive Foundation Framer includes symbols for global content updates. What does that mean? It means you can save elements (say, a header or a footer) and then update them all from one spot.

The interface is fairly straightforward.  You can edit the rows and layouts as well as different elements on the basis of the right panel.

responsive design

Bear in mind that we are talking about responsive design here. Now since Responsive Foundation Framer is a visual tool, it allows you to click and drag to change, edit, add or delete breakpoints. We know that Foundation framework comes with two breakpoints, but you can add or delete breakpoints by dragging the slider in the tool.

responsive foundation framer

For instance, when the breakpoint value is reduced, Responsive Foundation Framer reacts accordingly:


Since my screen was smaller, it allowed me to zoom in and out while fixing breakpoints, so that I can create designs that play well on larger screens too. This design and device agnostic approach is the back-bone of responsive design. It is refreshing to note that Responsive Foundation Framer is aware of this fact.

Once done, you can preview your work on the web browsers installed on your device.


You can sync (“Publish”) to the cloud if you have a paid subscription, or you can “Export” and deploy to your website or server elsewhere.

Responsive Foundation Framer comes with various customizable themes.

Festival Theme

You can, of course, tweak every theme to suit your needs and requirements.

Wave Theme

Unit Switcher: Control Unit Measurements on the Fly!

Responsive Foundation Framer lets you control unit measurements on the fly. We know that not all units are created alike. For example, layout elements work great with percentages as they can adapt based on the available width. While working with margins and padding you may want to use EM so you can space out your elements relative to the size of your text. However, what if you wish to use fixed dimensions for the purpose?

Unit Switcher

This is where the Unit Switcher proves useful. Visual designers will totally dig the VW option for fluid typography that resizes smoothly based on the device width and not just at a breakpoint. What to use when? It really depends on the design problem you’re addressing!


Responsive Foundation Framer costs $79 for one license. It includes all of the features as well as premium quality support and access to documentation and tutorials.

There is a free trial option available as well. Responsive Foundation Framer runs on OSX and Windows devices.


Responsive design is no longer a luxury. Everyone accesses the web via mobile devices at some point or the other during the day. Similarly, many people do use gigantic screens on their computers. All said and done, if your website is not responsive, it is of very little use.

As such, as a web designer, your designs should adhere to the principles of responsive design. Now, for the most part, most “responsive design” tools tend to repeat the same process over and over again. Either you are expected to code everything from the start, or you are given a severely crippled frontend editing functionality that offers a limited number of breakpoints and options for you to work with. In either case, your responsive design project does turn out responsive enough — but it lacks uniqueness and innovation that is expected from a web design concept.

Responsive Foundation Framer is an ideal tool for the job. By offering you granular control over each and every aspect related to your design, Responsive Foundation Framer makes it easy to create truly responsive design concepts. Similarly, several frontend visual editors tend to overlook the importance of web fonts; this one does not! Responsive Foundation Framer supports Google Fonts.

You also have the option to work with the back-end and export your stylesheets to the code editor of your choice. This makes it useful for folks who like to work with code rather than point and click all the time.

All said and done, Responsive Foundation Framer is a very useful solution when it comes to visual front-end editors for responsive design. By all means, you should consider giving it a spin right away!

Visit Responsive Foundation Framer

Read More at Responsive Foundation Framer: Responsive Design Made Easy

Read More…

CoffeeCup Responsive Design Pack Giveaway

coffeecup responsive design pack

Festival ThemeOur friends at CoffeeCup are giving away a Responsive Design Pack for FREE (a total value of $1500) to FIVE very lucky designers!

Featuring their top eight apps, the Responsive Design Pack is perfect for visually designing stunning websites, show-stopping photo displays, fully functional web forms, and money-making newsletters.

The pack is also loaded with a ton of customizable responsive themes. With drag-n-drop interfaces and clickable styling controls, it’s a breeze to create a modern web presence.

No purchase required – Must confirm entry via email

Read More at CoffeeCup Responsive Design Pack Giveaway

Read More…

Snooze and you will lose! Why you need a website


This is a sponsored post from a turn-key website builder. Stefan

Snooze and you will lose! Why you need a website

There are many things to think about every day. You get caught between solving issues, taking things to places, delegating tasks, planning ahead, dealing with family, friends, coworkers… Sometimes it seems just too much to handle. Yet, when you think it can’t get worse, the digital world comes creeping in with its own demands: emails, websites, social media, marketing…

In a hurry to make things more comfortable and to clear your head, your brain goes on survival mode and takes care of the most important tasks. When that seems to have taken most of your time, you are still left with other demands banging in our head. Among them, there is a special thought that has probably been with you for a while now and you know that sooner or later you will have to surrender to it. That’s right: a website.

“Why do I really need a website?” – you may be thinking. The answer is quite simple. You need to exist on the internet. As elementary as it may sound, you won’t really look good or even appear on Google and other search engines if you don’t have a website. In a world where everyone says “Google this” or “Google that”, I am sure you don’t want to be out when it comes to your business.

Needless to say, appearing on search engines such as Google is very important. But there are many other reasons why you need a website. Let’s go through a few of them.


Brand identity – your business needs stronger identity. You need to have a concept behind your logo and play with your colors to present your brand in the best way possible. Think about the Coca­Colas of the world. They just have an unforgettable identity. You should try to do the same. Maybe it’s time for rebranding, maybe not. But now think about Coca­Cola without a website. That is at least… weird. A website is indispensable if you take your business seriously. You need to have a website to improve your brand awareness. Having and your written on your business card makes it look a lot more professional and reliable.

Product Exhibition – 81% of shoppers search online before buying (1). If your product is not there when people search for it, you will be less likely to sell. Having your product online is essential to show to people what you do and how they can get it. In fact, by having a website and a store, you can convert visitors into customers right on the spot. They visit your website, browse through, see your products and purchase something. Sounds good, doesn’t it? All you have to do is put together a nice website based on your brand identity and promote your products there. A nice looking design combined with a well­organized store will place you one step ahead when it comes to conversions.

Digital Presence – Online, you can present your business and differentiate it from others instantly. This gives your business a whole new awareness. By having strong digital presence the average person will be able to find and understand what your business is, what you do and how you can make his life better. What you present on your website will establish your brand online. More than having good products, you must make sure everything presented in a very clear way. You can also support your brand by using social media pages to captivate a follower base. You can use these alternative pages to

talk about your website, post news related to your context, engage people with fun posts and so on. There is an infinity of ways through which you can grow both your website and social media presence.

Marketing – in addition to having a website with your products and developing a strong digital presence, having a website will give you an extra push in marketing. Your business can take advantage of a variety of tools available online. All you need is to plan through. You want to see results from your marketing efforts and be able to have good return on investment. That will come from clever marketing strategies. You need to know who your average customer is. Create a persona and elaborate on it. Your persona is the characterization of what your perfect customer is ­ his habits, way of living, thinking, etc. When you have that crystal clear you will take huge leaps using certain tools like social media, google, blogs, etc.

International visibility – a website will surely give you international visibility. By establishing an online presence and developing your market, it won’t take long until your business reaches the far sides of the globe. That will be great if you have products or services that you can export or offer globally. You can track where your visitors are from with Google Analytics. Simply register and follow the installing instructions to start seeing statistics from your web visitors.

Improve customer service – customers love the possibility of searching the business on Google, clicking on the contact page and then sending a message or making a call to the business. Here is an astounding fact: 94% of smartphone users look for local information on their phone and 90% take action, such as making a purchase or contacting a business (2). With a website, you can take huge advantage of that. Information like your phone number and email address have never been so valuable.



All you need to do is sign up on and click on “START HERE”. Then just follow the instructions. It is very straightforward and the site guides you through the process.



Next, select the category of your business. Choose the category that suits you best. This step is key to getting a good pre built website for your business. And will save you quite some time in editing.



Then it asks for some information. These will be used on your website. If you don’t understand something or have any questions about building your website, the support team is always live and ready to answer your questions!



After choosing a category and inserting your information, the system takes you to the website builder . It is very user friendly. All the functionalities are easy to use and it is very easy to find your way around. Now you know how to take advantage of this amazing website building tool so start developing your online presence today!



(1) And (2) ­­ux­statistics­you­should­not­ignore­i nfographic

The post Snooze and you will lose! Why you need a website appeared first on How to Build Websites.

What makes a great web design course?


I’ve been creating web design courses since 2003, and in that time I’ve learned the key elements of a great web design course:

  1. A teacher who knows how to teach! Unfortunately, most courses out there don’t have that.
  2. Instant feedback for the student.
  3. A teacher who has a lot of real world web design experience.

1. A teacher who knows how to teach!

Teaching is a skill. People go to school for years to learn how to teach. And of course, there is always natural talent and ability. The problem today is that the Web is filled with the casual nerd trying to make a buck, by creating a course on some coding language or another.

Most cannot teach very well.

I can’t tell you how many times people have to come to me frustrated, because they took some online course and they came away not able to build a website and overall, were left pretty confused. Many times they just assumed web design is hard to learn, but the reality is that they were simply taking a course from someone who doesn’t know how to teach.

There is a lot to teaching, you have to understand basic teaching techniques, psychology learning and more. Very few nerds have any training in this.

2. Instant feedback for the student.

As you are learning web design and coding, getting instant feedback and being able to ask questions (get hints) as you go, really speeds up the learning process. Despite all the advantages, the problem with online video is that you typically don’t have that interaction.

We’ve spent years working with schools and over 50 000 students, to develop our interactive training app that does just that. It’s pretty much like having a private tutor working with you, as you learn web design and coding.

3. A teacher who has a lot of real world web design experience.

Another thing you see out there in the land of web design courses, are young nerd ‘teachers’ who are barely out of their web design diapers! They have just a few years experience under their belts, and now claim to be people who can teach you.

In Malcolm Gladwell book ‘Outliers’, he talks about how it takes 10 000 hrs or about 10yrs to master any subject. This is pretty proven in studies. In fact, in my old Kungfu days, I remember that the tradition was that it took 10yrs to become a Kungfu master.

… So why are nerds with 4-5 years experience thinking they can teach web design? In Kungfu, the master will allow the senior students (with 5-6yrs experience) to teach the new students, but only under the watchful eye of the master. In Japanese styles, if a student tries to teach another student, the Sensei (teacher) will smack him or her down, because student teachers can do much more damage than good when trying to ‘teach’ someone.

…. I see this all the time with web design and programming courses.

Just in case you don’t know, we released our interactive web design training courses to the public this year. There is no easier way to learn real-world web design.

Stefan Mischook

The post What makes a great web design course? appeared first on How to Build Websites.

Sword Spark Effect in Photoshop


In this tutorial, we’re going to learn how to add a sword spark effect in Adobe Photoshop.

The Steps (1-6)

1. Open your main image in Photoshop.


2. Source an image of some sparks on a dark background and open this image in Photoshop. Press Cmd/Ctrl + A to select the entire canvas, and go to Edit > Copy, to copy the sparks image to the clipboard. Switch over to your main image and go to Edit > Paste to add the sparks into the image on a new layer.


3. With the sparks selected, go to Edit > Transform > Free Transform to adjust the Size, Rotation and Position of the sparks in relation to where you would like them to appear within your main image.


4. Double-click the sparks layer, give it a name of your choice, and set the Blending Mode to Screen.


5. Create a New Layer and position this layer underneath the sparks layer. Next, select the Brush Tool and choose a large feathered brush with a Hardness of 0%.


6. From the Colour Picker select a yellow/orange similar to the colour of your sparks, and Left-click to start adding the brush effect over your main image. Set the Blending Mode to Soft Light and adjust the Opacity as desired. This effect simulates a glow coming off of the sparks.


Download Adobe Photoshop.

Read More at Sword Spark Effect in Photoshop

Read More…

Launch Your Own Web Studio in 61 Days!

templatemonster marathon

You know what? We have got a bit of great news for you. In fact, it’s just something sensational.

We have been planning for this day carefully, and finally this day has come. TemplateMonster welcomes everyone who wants to change their life for better to join our Marathon, called “Your Own Web Studio in 61 Days”.

Everybody is free to take part in this Marathon and start a successful business in the web design industry.

templatemonster marathon

Ready For The Marathon?

If you want to get in, pay attention – the enrollment is open till the 25th of September.

What we need from you is the desire to learn and create something new, and the ambition to make more money. The Marathon is absolutely free, and it begins on the 26th of September.

What will you get? A free online course full of smart hints, tips, and tricks which will enable you to create your own web design studio.
Forget about all those “How to Make 1,000,000 Online” articles! What we offer you instead is an actionable step-by-step guide for those who are ready to work hard and achieve their goals. There is the only point we’d like to mention: it’s obligatory to follow and complete all practical tasks of the course.

templatemonster marathon

In 61 days, we will reveal all of our hidden secrets which will help you set up a great website and learn how to sell it. As soon as all the necessary tasks are fulfilled, you will get your own web design studio, and, what’s more, you will gain an opportunity to work from any corner of the world.

The greatness of our Marathon will knock the socks off every participant, for sure. In addition to design and development, you will learn about creating budget plans that actually work.

templatemonster marathon

Give it your best shot, follow the guidance of our experts, and complete all of the lessons on your way to building your private business.

One more thing, all the participants who reach the final will get a valuable prize from TemplateMonster. Great news, isn’t it?

So, are you ready for our Marathon? If the answer is a firm “yes”, join us in our quest to make the Web more beautiful. Determine what it is that you want to achieve and design your success with TemplateMonster.

Read More at Launch Your Own Web Studio in 61 Days!

Read More…

Becoming a Freelance Web Designer


What level of skill do you need to start taking on web design and development gigs?

With working knowledge of HTML5, CSS3 and JavaScript, you should have enough skills to start working as a web developer / designer. It takes surprisingly little time given the huge demand. But, if you can do a little server side coding with say PHP, Python or JavaScript, you will find that your prospects for work will grow exponentially!

My focus in this article is to help people get their freelancing career up and running. That said, for both freelancing and employment, it is important that you have a strong portfolio site that you can use to demonstrate your web design and development skills.

How to get your first clients?

Word of mouth is probably the easiest way to get clients. But to get that first one, you will likely have to offer up your skills for free. Ask friends, family or the small business down the street, if they need any web development work done. First offer to do it at student prices, or if they don’t accept that, since you are new, do it for free!

…. The key is to get some real credits to your name. Once you’ve done one or two small free or nearly free jobs, you will have a much easier time securing good paying jobs. Small business owners tend to know other small business owners and that’s where your referrals can come in. Ask your first few clients, if they can refer you to people they know.

How to manage clients and projects?

Success in a web development often comes down to project and client management. Be sure that you have a contract signed (you and your client should have signed copies), that details what you will be building for them, when you will deliver it, and how you will be paid. It’s very important that you and your clients understand what to expect in the process. Being transparent and upfront, will go a long way to keeping things running smooth between you and your client.

What to charge and how to bill clients?

As mentioned above, for your first 1-2 jobs, you should to expect to work at cut rates or even for free, so you can develop some contacts and experience.

Once you’re past that initial step, you should be charging on the low end of the scale, since you are just starting out and as a beginner, you will likely not be as productive as someone with a few years experience. In time though, you will be able to gradually raise your rates according to your skills and experience.

I can’t give an exact dollar amount to charge, since this will vary a lot depending on where you live. So I would suggest looking up local web professionals in your area, and research what they charge.

When it comes to billing clients, my preference is to use what I call the 33 split payment method. You take 33% of the agreed price up front, 33% when you deliver the first draft, and the last payment when you deliver the final.

This is a much better option than the typical 50/50 split, because what you will find, is that the period of time between the first draft, and the final is huge. With the 33 split method, you will QUICKLY get 66% of the money. Whereas with the 50/50 method, you might find yourself waiting a long time to get a big chunk of the money coming to you.

I’ve been in contracts where I’ve completed 90% of the work, but because of clients delaying things (not providing text, images or even simple feedback), I would be waiting months to finalize the job. In those situations, you are much better off with 66% of the money than only 50%!

What is the difference between per diem vs cost per project?

Per diem is being able to charge per hour, and per project is when a client wants a fixed cost for the entire job. Typically that’s what clients want, so they can control cost. So you have to be very careful when pricing outs jobs to be sure you don’t end up working for peanuts!

The power of FU money

The most important piece of advice I’ve ever been given, is the lesson of FU money. FU money is emergency money that you keep in a separate account that is used for emergency situations only. You should aim to build up enough FU cash to cover 1 years worth of expenses. Once you have that, you will have a lot more flexibility when negotiating with clients, since you will never be desperate for money.

As a side benefit, what you will discover is that your FU stash will give you a sense of confidence and calm that clients will instinctively feel, resulting in more contracts landed and more money in your pocket.


If you liked this article, then you will probably love the best web design course package I’ve ever put together.

Thanks for reading,

Stefan Mischook

The post Becoming a Freelance Web Designer appeared first on How to Build Websites.

Placing a Video Within a Circle in Adobe Muse

Muse For You - Placing a Video within a Circle in Adobe Muse - Adobe Muse CC

Place a Video within a Circle in Adobe Muse. No Coding Skills Required.

Muse For You - Adobe Muse CC Adobe Muse CC Logo

In this tutorial I will go over how to place a video within a circle in Adobe Muse using the Ultimate Video Widget 2.0 found at We will also be using Adobe Photoshop to create the transparent circle.

Adding the Video

1. From the Library Panel drag and drop the “Ultimate Video Widget – Add First” and place at the top of your Adobe Muse website. If you do not see the Library Panel go to Window > Library.

2. From the Library Panel drag and drop the “Ultimate Video Widget ” and place below the “Add First” widget.

3. Open the “Ultimate Video Widget” and add the following files to the widget:

  • .mp4 video
  • .webm video
  • .ogv video

To convert your .mp4 files to .webm and .ogv you can use the following video converter: Miro Video Converter.

4. Create a rectangle in Adobe Muse and fill it with the video poster image. The video will fit inside of this rectangle so make it as small or as large as you would like.

5. Assign the Graphic Style Name that is in the widget to the rectangle via the graphic styles panel in Adobe Muse. If you do not see the graphic styles panel go to Window > Graphic Styles. There is a small icon in the bottom right of the graphic styles panel that allows you to create a new graphic style from the element selected. Once this button is clicked the graphic style name will be “Style.” You will want to double click on this graphic style and rename it to the graphic style name that is in the widget. In this case it is “video1.”

6. Preview in the browser to see the video within the rectangle.

Muse For You - Placing a Video within a Circle in Adobe Muse - Adobe Muse CC

Creating the Transparent Circle

To place the video within a circle we need to create a transparent circle. We will be using Adobe Photoshop for this.

1. Open Adobe Photoshop.

2. Create a new file preferably 1000px by 1000px.

2. Create a new layer.

3. Select the rectangle tool in the toolbar and draw a white background over the new layer. The rectangle must fill the entire canvas. The color of this rectangle must match the background color of your website. In this case the background of the website is white so the rectangle is white.

4. Right click on this new layer and select “Rasterize Layer.”

5. Select the “Elliptical Marquee Tool” in the toolbar. Hold down the shift key and create a perfect circle over the layer with the white background. It can be as large or as small as you would like. The video is going to fit in this circle.

6. After the circle is created hit the “Delete” key. Then hide the first background layer in Photoshop by going to the layer and selecting the eye icon. You will notice that we now have a square with a transparent circle in the middle.

7. Save this file by going to File > Export > Save for Web and saving as a transparent PNG image.

Muse For You - Placing a Video within a Circle in Adobe Muse - Adobe Muse CC

Placing the Video within the Circle

1. Go into Adobe Muse and create a rectangle over the video rectangle.

2. Fill this rectangle with the image that was created in Adobe Photoshop.

3. Scale this image to fill and center it in the middle.

4. The video is now within the circle.

5. Preview in the browser to see the video within the circle.

6. Done.

Muse For You - Placing a Video within a Circle in Adobe Muse - Adobe Muse CC

View the video above for a live demonstration on how to place a video within a circle in Adobe Muse. For more video tutorials and widgets for Adobe Muse visit

Happy Musing :).

Read More at Placing a Video Within a Circle in Adobe Muse

Read More…