adobe – Web Design Ledger https://webdesignledger.com By Web Designers for Web Designers Wed, 27 May 2020 11:27:33 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.5 https://webdesignledger.com/wp-content/uploads/2015/08/cropped-Web-Design-Ledger-512x512-Pixel-32x32.png adobe – Web Design Ledger https://webdesignledger.com 32 32 An Intro to Adobe Edge Web Fonts: Updated for 2020 https://webdesignledger.com/intro-to-edge-webfonts/ https://webdesignledger.com/intro-to-edge-webfonts/#comments Tue, 26 May 2020 12:05:00 +0000 http://webdesignledger.com/?p=30565 With the release of Creative Cloud 2015, Adobe has continued its tradition of generating a buzz in the tech sector. In addition to major updates on their programs like Photoshop and Illustrator, Adobe has also released a new platform named Adobe Edge Web Fonts. Edge Fonts is a stunning font foundry that web designers can […]]]>

With the release of Creative Cloud 2015, Adobe has continued its tradition of generating a buzz in the tech sector.

In addition to major updates on their programs like Photoshop and Illustrator, Adobe has also released a new platform named Adobe Edge Web Fonts.

Edge Fonts is a stunning font foundry that web designers can use 100% free for all design work.

If you’re familiar with Adobe and the creative cloud platform then you know about TypeKit.

This is Adobe’s premium font service which costs money.

adobe font packs 2020

But with the release of Edge Fonts Adobe now provides an alternative to TypeKit, offering web designers over 500 different font-families to choose from.

I’ll give you an overview of Edge Web Fonts and why designers should be excited about this amazing collection of typefaces.

Edge Web Fonts Homepage

Worth the Wait

In the recent past Google has dominated the web font game. Simply put, no other service provided an extensive collection of web fonts for free.

There is no denying that Adobe TypeKit is extremely popular among web designers. But the price of TypeKit often caused people to stray from using it.

Because Edge Web Fonts is free to use commercially, Adobe now provides an alternative to the once unrivaled Google Webfonts.

Edge Web Fonts aims to provide a free service that is easy to use.

Just like Google Fonts, a person does not need any sort of account to utilize Edge Fonts library (Scroll down for an update on this).

In addition to being easy to use, Edge Fonts is powered by the TypeKit font service.

Users can expect high-end performance and stability for their web fonts.

Edge Web Fonts User Interface

Edge Web Fonts UI

In the image above you can see the interface Edge Web Fonts provides for choosing fonts.

For those of you who’ve used Typekit in the past, you’ll notice the Edge Fonts website is strikingly similar to that of TypeKit.

As a TypeKit user myself I think this is pretty important to note.

The user interface was one of the main reasons why I continued to use TypeKit, and now Adobe is providing this to web designers for free.

Edge Web Fonts Serif Filter

In the example above I’ve narrowed the choices down to only serif fonts in order to show you a basic example of how Adobe’s interface works.

Although this may not seem very powerful, it allows you to sift through font faces that are alike in some way.

Edge Fonts also allows you to search fonts depending on whether they will be used as a heading or paragraph text.

This interface is much easier to choose the most appropriate font for whatever environment you’re designing.

Google Fonts is indeed a tremendous font foundry for web designers, however, sifting through the extensive number of fonts can become a problem.

It seems Edge Web Fonts has a leg up in this regard.

Adobe Edge Web Fonts – 2020 Update

Adobe Fonts homepage screenshot 2020

In 2018, Typekit was finally and officially renamed as Adobe Fonts.

And that was great for all of us. With this new name came many new, much-needed updates.

For example, there are no more web-only fonts, no more desktop sync limits, and no more pageview limits.

And now instead of only having 500 fonts like there were when it Adobe fonts was first released, there are now thousands of fonts for you to choose from.

thousands of fonts on Adobe Fonts

Adobe Fonts is free to use IF you have a subscription to any one of their products.

It is no longer a standalone product like it was when it was Typekit.

That is a bummer, but hey, you gotta do what you gotta do.

And chances are, you probably have a subscription to Adobe.

So you should be good to go.

adobe fonts free price

The great thing about Adobe Fonts is that you don’t have to worry about finding the rights to any font you fall in love with, as Adobe takes care of all of that for you!

All fonts are free to use for personal and commercial use.

This means that once you find that perfect font for your project, that’s literally it.

No more contacting the owner and buying the rights to it.

That’s right, you just get to keep the perfect font.

Isn’t that amazing?

Top 10 Adobe Fonts Designers Use

Before we end our time together today, I want to show you my top 10 favorite fonts from Adobe Fonts.

If you’re not convinced that you need to be using Adobe Fonts yet, well, after this, I’m almost certain you will be.

1. Acumin

Acumin adobe fonts 2020

2. ITC Avant Garde Gothic

ITC Avant Garde 2020 adobe fonts

3. Orpheus

4. ITC Benguiat

5. Plantin

6. Minion

Adobe fonts 2020

7. Franklin Gothic

8. Proxima Nova

9. Baskerville

10. Mrs Eaves

Conclusion

In order to truly grasp the power of Edge Web Fonts you’ll have to check it out for yourself.

Not only does it provide an extensive number of fonts, it also makes the process of finding them quick & easy. Also you should remember that Edge Web Fonts provides premier performance for your font styles by utilizing TypeKit!

You’ll surely not be disappointed when you see what has been given to web designers with the incredible Edge Web Fonts service.

]]>
https://webdesignledger.com/intro-to-edge-webfonts/feed/ 2
25 Manipulation Tutorials to Take Your Photoshop Skills to the Next Level https://webdesignledger.com/25-manipulation-tutorials-take-photoshop-skills-next-level/ https://webdesignledger.com/25-manipulation-tutorials-take-photoshop-skills-next-level/#respond Thu, 26 Jul 2018 14:08:58 +0000 http://webdesignledger.com/?p=44941 We’ve put together an amazing list of Photoshop manipulation tutorials that we hope every designer, beginner or master, will find it useful.  There are several essential skills that make a designer successful. Every single one is crucial and has a lot of power when used appropriately. A skillful desinger: knows and operates with the notions […]]]>

We’ve put together an amazing list of Photoshop manipulation tutorials that we hope every designer, beginner or master, will find it useful. 

There are several essential skills that make a designer successful. Every single one is crucial and has a lot of power when used appropriately. A skillful desinger:

Adobe Photoshop is one of the most potent design softwares in the world and one of the most popular. And there is a reason for that. With Photoshop you can create about anything your mind can come up with.

You can retouch a photo, apply filters, design a logo or website, use Photoshop actions and edit a bunch of images at once, crop the picture, and much more. In order become super knowledgeable and to create design in a no-time, you have to practice daily. What better ways for doing that than following a step-by-step manipulation tutorials?

In this list, we have shared 25 fantastic manipulation tutorials which will stretch your creativity and help you think out of the box. You are going to create hologram effect, create a melting camera, build a surreal landscape and make a fantasy deer.

1. Add a Hologram Effect to a Photo Using Photoshop

add-a-hologram-effect-to-a-photo-using-photoshop

2. Digital Painting Lesson: How to Create a Photo Realistic Portrait

digital-painting-lesson-how-to-create-a-photo-realistic-portrait

3. How to Make a Melting Camera Scene

how-to-make-a-melting-camera-scene

4. The Ultimate Guide to Adjustment Layers – Gradient Map

the-ultimate-guide-to-adjustment-layers-gradient-map

5. Photoshop tutorial: Advanced compositing techniques

advanced-compositing-techniques

6. How to Digitally Add Shallow Depth of Field

how-to-digitally-add-shallow-depth-of-field

7. Create a Colorful Out of Frame Animal Composition

create-a-colorful-out-of-frame-animal-composition

8. How to Create a World Under the Sky using Photoshop

create-world-sky-photoshop

9. How to Create a Stunning Surreal Landscape

create-stunning-surreal-landscape

10. Create an Epic Beach Disaster Scene

create-an-epic-beach-disaster-scene

11. Design a Conceptual Album Cover in Photoshop

design-a-conceptual-album-cover-in-photoshop

12. Create a Devastating Tidal Wave in Photoshop

create-a-devastating-tidal-wave-in-photoshop

13. Create a Surreal Smoking Photo Manipulation

create-a-surreal-smoking-photo-manipulation

14. IMAGE DESIGN: NOW YOU CAN CREATE A SURREAL BOTTLE OCEANSCAPE

image-design-now-you-can-create-a-surreal-bottle-oceanscape

15. Photo Manipulate a Surreal Sky Station Scene

photo-manipulate-a-surreal-sky-station-scene

16. Amazing Light Photo Manipulation Tutorial

amazing-light-photo-manipulation-tutorial

17. Learn How to Photo Manipulate the Colorful Portrait ‘Transcendental’

learn-how-to-photo-manipulate-the-colorful-portrait-transcendental

18. Create a Fantasy Deer Photo Manipulation in Photoshop

photo-manipulation-create-a-fantasy-deer-photo-manipulation-in-photoshop

19. How to Create an Amazing Watercolor Artwork in Photoshop

create-amazing-watercolor-artwork-photoshop

20. How to Turn a Photo Into a Beautiful Painting in Photoshop

how-to-turn-photo-into-painting-photoshop-tutorial

21. Create a Coffee Cake Photo Manipulation

create-a-coffee-cake-photo-manipulation

22. Create a Surreal Rock Formation in Photoshop

create-a-surreal-rock-formation-in-photoshop

23. Human Scarecrow – Manipulation Tutorial

human-scarecrow-manipulation-tutorial

24. Making Your First Photoshop Manipulation

making-your-first-photoshop-manipulation

25. How to Make a Fish Jump Out of Water

fish-jump-water

 

If you found this tutorial list helpful, share it with your fellow designers so that they can benefit from it, too. You never know whose designer’s life you are saving just by sharing an article.

Would you like to share your tutorial with us? Drop us an e-mail at webdesignledger.blog@gmail.com and we will make sure it reaches to other designers.

]]>
https://webdesignledger.com/25-manipulation-tutorials-take-photoshop-skills-next-level/feed/ 0
Adobe is Closing Business Catalyst and Muse. Here Is Our Favorite Alternative https://webdesignledger.com/adobe-closing-business-catalyst-muse/ https://webdesignledger.com/adobe-closing-business-catalyst-muse/#comments Mon, 18 Jun 2018 16:48:48 +0000 http://webdesignledger.com/?p=44419 If you’ve been using Adobe’s Business Catalyst (BC) or Muse to build websites, you’re in a bind. Adobe announced that they are shutting down Business Catalyst and Muse after years of operation. Typically, agencies that use Business Catalyst also integrate Adobe Muse into their workflows to streamline the development and management of websites. So this […]]]>

If you’ve been using Adobe’s Business Catalyst (BC) or Muse to build websites, you’re in a bind. Adobe announced that they are shutting down Business Catalyst and Muse after years of operation.

Typically, agencies that use Business Catalyst also integrate Adobe Muse into their workflows to streamline the development and management of websites. So this end-of-life announcement came as a shock to the thousands of businesses using the tools, as both platforms are getting squelched at the same time.

For Business Catalyst, Adobe gave the final deletion date to be March 26th, 2020 (although they later shifted it to March 26th, 2021 after some of their customers requested that the timeline be extended). The company also stated that users have until June 18th, 2018 (later extended to August 27th) to upgrade trial sites to paid, while new trials will no longer be available after June 18th, 2018.

For Muse, the shutdown process already commenced with the final feature improvement release on March 26, 2018. Adobe said they will continue to offer technical support to all active Creative Cloud customers until March 26, 2020. It seems the company will likely deliver compatibility updates for Mac and Windows OS, or fix any bugs that might crop up when publishing Muse sites. But it’s obvious that service quality will fall drastically after Adobe stops support for the software.

Adobe closes down

For the record, Business Catalyst is an all-in-one Content Management System (CMS) for building and managing websites. It integrates sales, ecommerce, content, and marketing features and was acquired by Adobe in 2009.

On the other hand, Adobe Muse is a website builder that allows users to create fixed, fluid, and adaptive websites without having to write any code. It was launched by Adobe in 2012.

Now, following this imminent shutdown, businesses and web design agencies that are using the platforms would have to find alternatives before the deadline. In fact, it’s recommended that you do ASAP.

One reason being that, migrating a site could take longer than anticipated — budgeting, planning, execution, fixes, etc. — especially for businesses with multiple websites and/or a huge amount of data; thus, you don’t have to wait until the last minute.

Another is that this announcement could mean the two tools are only going to attenuate in performance and customer service going forward, until they’re finally snuffed out.

Even Adobe encourages customers to download their data and migrate to other systems well before the deadline. They said all BC servers will be taken down (on March 26th, 2020 2021). This means the data of all its customers will be deleted and won’t be available for download after the service end date.

This is why you should find a new solution immediately.

But wait, what great alternatives are out there?

As a web design agency looking to provide a phenomenal service to your clients, you need a design and development platform that’s equally phenomenal to support your vision. Adopting a less than stellar platform can only result in unnecessary pains for you and your clients, which can ultimately kill your agency’s brand reputation. And so to help you find your next web builder, we’ve looked into why Duda could be your best shot for replacing Business Catalyst and Muse.

 

Introducing Duda

Duda is a software suite for creating optimized websites, primarily for small and medium-sized businesses. It offers responsive website and mobile builders, with the flexibility to access scads of cutting-edge web design tools you won’t find on platforms like Squarespace or Wix.

Instead of focusing entirely on the site building experience, Duda also provides digital agencies the technology needed to incorporate branding into their projects, initiate team collaboration, automate certain workflows, and streamline client communications.

In a sense, Duda could be everything a web design agency will ever need to build beautiful sites at scale.

How huge and trustworthy is Duda? It’s currently being used by over 12 million websites at the time of writing this, and has partnered with companies such as Google, AT&T, Yahoo!, Intuit, and OpenTable.

How Duda stacks up against Business Catalyst and Muse

While Muse is built specifically for creative designers who need a “design-focused” platform for building sites, Business Catalyst is designed primarily for agencies to build fully functional and scalable business websites.

It’s safe to say that both Business Catalyst and Muse pack some of the most useful features for web design agencies.

However, Duda does measure up pretty nicely against the two tools when it comes to features that are game-changers for agencies.

To help determine if Duda is right for you, let’s drill down into some key features of each platform and also compare to see how they stack up against each other:

Business Catalyst’s features are built around its core areas of offerings, which are content management, eCommerce, events, digital marketing, blogging, customer database (CRM), membership site management, etc.

With these features, agencies can create different types of sites for their clients, including blogs, event websites, membership sites etc.

Also, without the need for custom coding or configuration of third-party systems, BC allows agencies to build online stores clients can use to sell both physical and digital products, with integrations for billing, shipping, discounts, vouchers, referrals, and automated recurring orders.

These sites can be managed from anywhere, as BC allows access to its Admin Console on any device.

On the other hand, since Muse is specifically aimed at professional designers, its features are typically design-based.

In short, if you’ve used any related graphics software like Photoshop in the past, you will find Muse’s UI convenient and intuitive because of their similarities.

Muse is open-ended. This means you don’t get any ready-to-use templates or themes, but are provided with a blank canvas. With that, you’re free to design your website from scratch, anyhow.

Muse also has an integration capability for styling a blog from any popular blog service, including Tumblr and WordPress.

Compared to Business Catalyst and Muse, Duda packs a bunch of features which any web design agency will find delightful. Here’s a run-through of some of them:

  • Optimized communications: After publishing a new website with Duda, you can easily push a “Welcome Email” to the respective client to notify them that their site is live. If you want the client to manage the site from their end, you can also include the login credentials in the email. Also, Duda’s “Statistics Digest” tool lets you schedule regular analytics reports to your clients, which helps your agency to be perceived as a detail-oriented team that delivers value.

 

  • Fully white label-able platform: With Duda, you can incorporate custom branding elements into your backend’s admin interface. Some of the elements include the logo, text colors, buttons, and background images. This alone can boost brand loyalty and impress your clients, as they’ll be working with a team that “has its own custom-made proprietary platform.”

 

  • Smart content collection tools: One area web design agencies find themselves struggling is appropriating existing assets from clients; they’ll often have to chase after clients for files and content. Duda solves that problem with its “Content Collection Form,” making it effortless for clients to submit images, files, and important business details in an expedited process. You can also import assets from another website by using the “Import Content” module.

 

  • Access control and permissions: Duda offers a unified tool for managing account permissions for both clients and team members. Business Catalyst has a similar feature, which allows administrators to set and control each admin user’s level of access.

 

  • Repackage and sell your custom-branded Duda portal: Duda goes beyond helping you build a masterly web design environment to letting you repackage the platform as your own resellable self-service web design portal.

 

  • Widget builder ecosystem: Duda comes with a built-in, drag-and-drop widget builder which you can use to add custom interactive experiences for users.

 

  • Assignable, dynamic, modular sections: Duda provides dynamic modular content ”Sections” that serve as the building blocks of your website.

 

Adobe

Of course, these aren’t the only features/benefits Duda has. In fact, there are a wealth of them. These ones are specifically handy for web design agencies, even though Duda also supports digital publishers and hosting companies.

Conclusion

The news of Adobe’s impending closure of both Business Catalyst and Muse may pose a threat to your business, if you’ve been using their systems. But the end of life for those tools doesn’t have to spell the end of your business.

If you make the right decision, not only can your business pull through the challenge, but can also thrive as it emerges on the other side.

Using the information provided, you should be able to determine whether Duda makes a great alternative for the soon-to-be-defunct platforms.

]]>
https://webdesignledger.com/adobe-closing-business-catalyst-muse/feed/ 1
How to Add Gradient Text to your Adobe Muse Website https://webdesignledger.com/how-to-add-gradient-text-to-your-adobe-muse-website/ https://webdesignledger.com/how-to-add-gradient-text-to-your-adobe-muse-website/#respond Wed, 24 May 2017 17:57:28 +0000 http://webdesignledger.com/?p=40787 [youtube https://www.youtube.com/watch?v=e1f5yON3vmQ&w=560&h=315] How to Add Gradient Text in Adobe Muse. No Coding Skills Required.    Gradients can be a great touch when wanting to add more styling to your website. With a lot of UI and UX design these days we are seeing gradients everywhere. It is actually a real art and skill to make […]]]>

[youtube https://www.youtube.com/watch?v=e1f5yON3vmQ&w=560&h=315]

How to Add Gradient Text in Adobe Muse. No Coding Skills Required.

 Muse For You - Adobe Muse CC Adobe Muse CC Logo

Gradients can be a great touch when wanting to add more styling to your website. With a lot of UI and UX design these days we are seeing gradients everywhere. It is actually a real art and skill to make sure the right colors blend together and to give the user a unique visual representation of a product or brand. Lately, I’ve been having a lot of fun with gradients and looking at different ways to incorporate more advanced gradients into Adobe Muse. Adobe Muse has its own built-in gradient option but it only allows you to add two colors and make the gradient either horizontal or vertical. That is why I released the “Advanced Gradients” widget that allows you to add more than two colors to a gradient and to set the gradient angle from 0 to 360 degrees. I myself have been using it quite often to add more styling to sample pages I’ve been creating. I will talk more about the Advanced Gradients widget in another article.

In this article, I am going to be covering the “Gradient Text” widget. I haven’t seen gradient text as often as elements with gradients so I thought now would be the perfect time to introduce it. Gradient text looks really slick and it can add that extra bit of styling to make a website really stand out.

Muse For You - Gradient Text Widget - Adobe Muse CC - Web Design Ledger

Here is how to add the Gradient Text widget in Adobe Muse:

1. Install the widget by double clicking on the .mulib file.

2. Go to the Library Panel in Adobe Muse. If you do not see the Library Panel go to Window > Library.

3. Click, hold, and drag the widget onto your Adobe Muse website. The initial text will say “Muse For You,” and it will have a blue to green gradient.

4. Set the instance number for the widget in the “Instance” section. Each new gradient text with different styling properties should have a unique instance number.

5. Type the text you would like to apply a gradient to in the “Text” section.

6. Format the text within the “Text” section of the widget. Here you will find all the options to customize the size, letter spacing, line-height, text transform, alignment, and font weight of the text. To change the font type for the text select the widget and then go to the built-in Adobe Muse text option and select a web font from the drop-down.

7. Next, open the “Gradient” section. Here you can set the gradient angle, the first color, and the second color for the gradient. You can also adjust the gradient position and opacity for each color.

8. There is an “IE Fallback” section that allows you to select the color for the text on browsers that do not support gradient text. At the moment Internet Explorer browsers do not support gradient text. The Edge browser does support gradient text.

9. To make sure the gradient shows up well within the text make sure the widget container is not too large in width. Making the width of the widget container larger stretches out the gradient behind the text and makes the gradient not as visible. You can set the gradient width so it is very close to the left and right side of the text.

10. Done!

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing!

]]>
https://webdesignledger.com/how-to-add-gradient-text-to-your-adobe-muse-website/feed/ 0
Neon Text Effect Photoshop Tutorial https://webdesignledger.com/neon-text-effect-photoshop-tutorial/ https://webdesignledger.com/neon-text-effect-photoshop-tutorial/#respond Fri, 20 Jan 2017 18:31:25 +0000 http://webdesignledger.com/?p=39503 In this tutorial, we’re going to learn how to create a neon text effect in Adobe Photoshop. Download Adobe Photoshop.]]>

In this tutorial, we’re going to learn how to create a neon text effect in Adobe Photoshop.

Download Adobe Photoshop.

]]>
https://webdesignledger.com/neon-text-effect-photoshop-tutorial/feed/ 0
Rock Text Effect In Illustrator – Tutorial https://webdesignledger.com/rock-texture-effect-illustrator-tutorial/ https://webdesignledger.com/rock-texture-effect-illustrator-tutorial/#respond Wed, 07 Dec 2016 16:52:00 +0000 http://webdesignledger.com/?p=38967 In this tutorial, we’re going to learn how to create a rock texture for your text, in Adobe Illustrator.   Download Adobe Illustrator.]]>

In this tutorial, we’re going to learn how to create a rock texture for your text, in Adobe Illustrator.

 

Download Adobe Illustrator.

]]>
https://webdesignledger.com/rock-texture-effect-illustrator-tutorial/feed/ 0
How To Center a Logo Within the Browser in Adobe Muse https://webdesignledger.com/center-logo-within-browser-adobe-muse/ https://webdesignledger.com/center-logo-within-browser-adobe-muse/#respond Tue, 22 Nov 2016 15:00:40 +0000 http://webdesignledger.com/?p=38758 [youtube https://www.youtube.com/watch?v=Zb_lIiBsais] Center Your Logo Vertically and Horizontally Within the Browser in Adobe Muse. No Coding Skills Required.    Branding plays a big part in web design and most websites are branded with a logo and a slogan. A lot of times web designers and developers look for the best way to initially show the […]]]>

[youtube https://www.youtube.com/watch?v=Zb_lIiBsais]

Center Your Logo Vertically and Horizontally Within the Browser in Adobe Muse. No Coding Skills Required.

 Muse For You - Adobe Muse CC Adobe Muse CC Logo

Branding plays a big part in web design and most websites are branded with a logo and a slogan. A lot of times web designers and developers look for the best way to initially show the brand when someone visits their website. That is why I decided to create the Browser Centering Widget. With this widget you can initially center any element directly in the center of the browser. The element will be vertically centered and horizontally centered across all devices until the user scrolls, and then the element scrolls with the website. You can also fix the element in the center of the browser. This will insure that the brand or logo gets maximum attention and looks great when the user first visits the website. In the video above I go over how to use the Browser Centering Widget in your Adobe Muse website.

The steps are as follows:

1. Drag and drop the widget from the library panel onto your Adobe Muse website. If you do not see the library panel go to Window > Library.

2. Assign the graphic style name that is in the widget to the element you would like to center via the graphic styles panel. If you do not see the graphic styles panel go to Window > Graphic Styles.

3. Place the element at the very top of your Adobe Muse website. Element can be anywhere at the top.

4. If you would like the element to stay fixed in the center and not scroll with the website select ‘Fixed in Center’ within the widget.

5. Done.

 Muse For You - Browser Centering Widget - Adobe Muse CC

You now have a centered element on your website. No matter what device the user is on you can be sure that the centered element will be the first thing they see.

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing :).

]]>
https://webdesignledger.com/center-logo-within-browser-adobe-muse/feed/ 0