Обучение adobe muse: 47 уроков по Adobe Muse для начинающих

Adobe Muse Уроки. Просто, понятно, доступно. » Adobe Muse Уроки

Adobe Muse Уроки – моё открытие.

Adobe Muse Уроки. Начало.

Примерно в первой половине 2014 года, когда я первый раз познакомился с программой Adobe Muse, я воскликнул:

“Просто Супер! Как же это здорово,  что теперь для создания сайтов не нужно знать языков программирования, без строчки кода! Просто, понятно, доступно! Adobe Muse Уроки!”

Думаю многие уже просто ждали выхода на рынок специальной программы, которая бы упростила и ускорила создание сайтов. Это позволило бы создавать сайты даже тем, кто не хочет влазить в глубины кодов html и css.

Именно такой продукт, такую программу и выпустила компания Adobe – программу Adobe Muse.

Я просто не смог пройти мимо и долгие долгие вечера я посвящал изучению работе в этой программе самостоятельно.

При всей своей простоте и уникальности, Adobe Muse все же имеет много нюансов и подводных камней, о которых можно сразу и не догадаться, а о некоторых вы можете не знать вовсе, причем вы возможно даже и не задумаетесь обратиться за квалифицированной помощью, поскольку не будете знать какой вопрос задавать, особенно если вы вообще никогда не сталкивались с некоторыми понятиями.

Несмотря на простоту Adobe Muse – обучение работе в ней просто необходимо.

И, зная о том что программа уже некоторое длительное время существует без моего ведома, я решил пройти обучение у тех, кто уже натыкался на различные неприятности и набил множество шишек, прежде чем научиться грамотно и с умом обращаться с этой программой. Таким образом я сэкономил свое драгоценное время, но пришлось затратить при этом некоторую часть честно заработанных средств, для того чтобы ускорить свое обучение и досконально, еще более профессионально, “по-взрослому” научиться работать в этой программе.

Ни о чем не жалею.

Получил массу полезных знаний, фишек и навыков, которые с успехом применял и применяю в создании сайтов и страничек для своих друзей, знакомых и всех тех, кто делает у меня заказы.

Adobe Muse Уроки. 

В результате полученных знаний и наработанного опыта – “я стал тем, кто я есть сейчас”. А в середине 2015 года решил делиться своими знаниями и опытом со всеми, кто только начинает постигать азы данной программы. Я стал записывать видеоуроки по работе в Adobe Muse и выкладывать в интернет. Этот сайт – явился продолжением моего YouTube канала – “

Adobe Muse Уроки“.

Этот сайт.

На этом сайте Вы найдете виджеты, шаблоны, обзоры нововведений в программе Adobe Muse и все видеоуроки, которые публикуются на моем канале, и дополнительные материалы к ним.

Если вы найдете этот сайт полезным и познавательным, делитесь ссылками на него со своими друзьями и знакомыми, с теми кому это будет нужно, оставляйте свои отзывы и комментарии, помогайте друг другу получить доступ к знаниям.

Приятного Вам обучения!

Большой базовый курс Adobe Muse

> 2.1 Работа с графикой

2.1.1 Область контента и область браузера

2.1.2 Два способа размещения графики

2.1.3 Поддерживаемые форматы графики

2.1.4 Работа с панелью «Ресурсы»

2.1.5 Редактирование графики

2.1.6 Параметры изображений

> 2.2 Работа с объектами

2.2.1 Работа с прямоугольниками

2.2.2 Дизайн прямоугольников

2.2.3 Группировка элементов на сайте

2.2.4 Инструмент выравнивания элементов

2.2.5 Эффекты прямоугольников

2.2.6 Стили графики и их применение

2.2.7 Настройка растягивания объектов

2.2.8 Закрепление объектов

> 2.3 Работа с состояниями объектов

2.3.1 Состояния объектов на сайте

2.3.2 Примеры использования состояний

> 2.4 Работа с текстом

2.4.1 Инструменты текста (текстовые фреймы)

2.4.2 Дизайн текста

2.4.3 Веб-шрифты для сайта

2.4.4 Установка своих веб-шрифтов

2.4.5 Стили символов и абзацев

2.4.6 Нумерованные и маркированные списки

2.4.7 Управление глифами

> 2.5 Работа с палитрами

2.5.1 Что такое палитра цветов

2.5.2 Управление набором палитры

2.5.3 Работа с градиентами

> 2.6 Работа со ссылками

2.6.1 Создание ссылок и их типы

2.6.2 Создание ссылок на скачивание файлов

2.6.3 Работа со стилями ссылок

2.6.4 Работа с якорными ссылками

> 2.7 Создание меню для сайта

2.7.1 Способы создания меню для сайта

2.7.2 Создание меню в автоматическом режиме

2.7.3 Создание меню в ручном режиме

2.7.4 Настройка выпадающих подменю

> 2.8 Работа с виджетами

2.8.1 Как установить сторонний виджет

2.8.2 Где скачать виджеты на русском языке

2.8.3 Виджеты Композиции и Слайдшоу

2.8.4 Виджеты Панели

2.8.5 Виджеты социальных сетей

2.8.6 Виджеты контактных форм

> 2.9 Работа с HTML кодами

2.9.1 Вставка своего HTML кода

2.9.2 Внедрение Яндекс-карты на сайт.

> 2.10 Работа с эффектом прокрутки

2.10.1 Что такое эффекты прокрутки

2.10.2 Создание эффектов прокрутки фона

2.10.3 Примеры эффектов прокрутки

> 2.11 Создание эффектов с прозрачностью

2.11.1 Что такое эффекты прозрачности

2.11.2 Примеры применения прозрачности

90000 Adobe Muse Release Notes 90001 90002 90003 Scroll Effects in Fixed-Width Breakpoints 90004 90005 90002 You can now use scroll effects for items on any breakpoint set to fixed-width. The breakpoint’s fixed or fluid width setting can be changed through the Breakpoint Properties, available by double-clicking a breakpoint or right-clicking it. 90005 90002 90003 Responsive Width & Height Rectangles, YouTube, and Vimeo Widgets 90004 90005 90002 The responsive width and height resize option is now enabled for rectangles as well as YouTube and Vimeo widgets.90005 90002 90003 Vertical Move Handle 90004 90005 90002 This handle is a game-changer when working with responsive sites! When an object is selected on the page, the Vertical Move Handle appears and allows the option of moving all objects below it. When using the handle, objects below the top of the current selection will be moved up and down the page. Double clicking on the handle will select all items below the Vertical Move Handle. 90005 90002 90003 Native Illustrator File Support 90004 90005 90002 AI files can now be directly placed into Muse.Say hello to easy vector update workflows through the Asset panel you know and love! SVGs are automatically generated when your site is published. 90005 90002 90003 Google Page Speed ​​Improvements 90004 90005 90002 Muse now loads all JavaScript asynchronously. Additionally, if your site is hosted on an Apache web server and you FTP upload through Muse, we enable browser caching for CSS, images, and JavaScript files. These changes can help improve Google Page Speed ​​ranking. We now give you the option to choose whether or not to allow your page to load faster using fallback fonts.New and existing sites have the same behavior as before (waiting for the web fonts to be available before displaying the page). This new feature is found in Site Properties in the Advanced tab under the Web Fonts section. 90005 90002 90003 Adobe Comp CC 90004 90005 90002 Muse is now integrated with Adobe Comp CC, an app that is available for iPhones and iPads. This app bridges the gap between mobile and desktop, allowing you to create your layout anywhere, anytime. Comp CC allows you to add components like rectangles, image placeholders, or text boxes by using hand gestures.The app converts these gestures into crisp graphics, enabling you to complete your layout within minutes. 90005 90002 90003 CC Libraries Color Improvements 90004 90005 90002 CC Libraries color has been taken to the next level of ease of use. Now you can add custom-named swatches to the Swatches panel. Also try multi-select with right-click to add multiple colors to the Swatches panel at one time. Objects can have stroke set to a CC Libraries color and text color can also be set. Last but not least, you can now set the page or browser fill to a CC Library color.90005 90002 90003 Ellipse Tool 90004 90005 90002 Create ellipses and circles with the new ellipse tool directly within Muse. Hold the shift-key to make circles. 90005 90002 90003 Image Frame Tool 90004 90005 90002 This new tool creates both rectangular and elliptical empty image frames on the page. Create placeholder image frames that you can fill later when the content is ready. Simply fill the empty frames by dragging into them at any time. 90005 90002 90003 Collect Assets 90004 90005 90002 Gathering up all a site’s assets to move a project elsewhere has never been easier.It is now possible to copy all asset files used in a site to a single location on your computer. 90005 90002 90003 Start Screen 90004 90005 90002 The start screen has been updated to include new functionality common to CC applications. 90005 90002 90003 Plan View Orientation 90004 90005 90002 Plan view now includes a vertical layout option to see master and child pages. Sites with more pages and complex hierarchies will be a whole new experience. 90005 90002 90003 Direct Editing of Minimum Page Width 90004 90005 90002 The minimum page width is now directly editable using the breakpoints bar.Move your mouse to the edge of the minimum page size area in the breakpoints bar. When the cursor changes to a resize cursor, click and drag to adjust the minimum page size. 90005 90002 90003 New Preference for Preview IP Address 90004 90005 90002 Some firewall settings prevent Muse Preview and Preview In Browser from making a connection. If you’re having trouble previewing, there is a new preference in the Muse Preference dialog that allows you to choose from 3 different connection settings.90005 90002 90003 Sticky Footer with CSS 90004 90005 90002 Our sticky footer feature, where if a page does not reach the bottom of the browser we resize the page’s height, has been rewritten using CSS in addition to JavaScript. Short pages that use this feature will load faster. 90005 90002 90005 .90000 Create websites for mobile devices using Adobe Muse 90001 90002 90003 Click away from the Links dialog box to close it. 90004 90005 90006 Next, you’ll add the page content for the Section 03 page. 90007 90008 90003 Click the Scratch (Desktop) tab to return to the Scratch page. Select the white rounded background rectangle, the purple 03 circle, the Section 03 text frame, the contact form, and the submit button. Copy the selected items. 90004 90003 Press Command + J (Mac) or Control + J (Windows) and type the first few letters of Section 03.Click the down arrow key to select the Section 03 phone page and then press Return / Enter to open it in Design view. 90004 90003 Paste the elements you copied in step 1 on the Section 03 page of the phone layout. Use the Selection tool to center them on the page using the alignment guides. The styles applied to the desktop Contact Form widget are maintained when copied to the phone layout. The only change made to prepare the form for a mobile layout involves resizing the form and the form elements to fit on a smaller screen.90004 90005 90006 The Section 03 page contains a Contact form widget that uses the Business Catalyst server-side scripts and database to process the submitted form data. When you click Publish and upload the site files from Muse, the form functionality works automatically. 90007 90006 90019 90020 Note: 90021 90022 While you can use other service providers to host your finished Muse website, be aware that you’ll need to do some additional coding in order to make contact forms work if they are not hosted on the Business Catalyst servers .90007 90006 In this sample project, the contact form does not have CAPTCHA enabled. CAPTCHA is a setting in the Options menu for Contact Form widgets that you can add when you want to confirm that the form was submitted by a human, and not a script or «spam bot» — the CAPTCHA interface displays an image with a series of characters that requires the visitor to type in the matching string in order to successfully submit their message through the form. While spam bot form submissions can be a nuisance, it’s also important to consider the site’s usability on a mobile phone.If you make the form too difficult to fill out, visitors may decide not to submit their message. 90007 90006 The Section 03 page is now complete. There’s no need to add a link to the Submit button, because the button is already set up as part of the Contact Form widget. 90007 90006 The final page of the phone layout, Section 04, contains a Slideshow widget. Widgets in Muse are designed and tested to work with all modern desktop and mobile browsers, so you do not need to change anything to make the slideshow work on a touch screen.90007 90006 Follow these steps to copy the content from the scratch page of the desktop layout to the Section 04 page in the phone layout: 90007 90008 90003 Click the Scratch (Desktop) tab to return to the Scratch page. Select the white long background rectangle, the red 04 circle, the Slideshow widget, and the Section 04 text frame. You can use the Selection tool to click and drag over all the elements to select them at once. Copy the selected items. 90004 90003 Press Command + J (Mac) or Control + J (Windows) and type the first few letters of Section 04.Click the down arrow key to select the Section 04 phone page and then press Return / Enter to open it in Design view. 90004 90003 Paste the elements you copied in step 1 on the Section 03 page of the phone layout. Use the Selection tool to center them on the page using the alignment guides. The styles applied to the desktop Contact Form widget are maintained when copied to the phone layout. The only change made to prepare the form for a mobile layout involves resizing the form and the form elements to fit on a smaller screen.When you add widgets with interactive features (such as Slideshow widgets) to mobile layouts you create in Muse, you’ll notice that the Options panel includes the option: Enable Swipe. This setting is enabled by default, so any widgets you add to your mobile designs are automatically set up to allow visitors to tap and use gestures on touch screens.The Section 04 page contains a Slideshow widget that displays the corresponding image when a thumbnail is tapped . The slideshow is configured to use a horizontal transition to flip between images in the gallery.This example requires user interaction to display the photos, although if you choose, you can set the Slideshow widget to autoplay, so that it will cycle through the images automatically when the page loads. 90004 90005 90006 90019 90020 Note: 90021 90022 If you configure slideshow widgets to use the Fade, Horizontal, or Vertical transitions, the code in Muse automatically enables the Swipe finger gesture to allow visitors to swipe their touch screen to flip through the slideshow images.90007 90006 In the next section, Creating mobile layout designs in Muse, you’ll learn how to easily update assets across all mobile platforms, and how to publish your Muse site for each mobile layout. 90007 .90000 Muse CC: hands-on review | Creative Bloq 90001 90002 Yesterday I wrote in some detail about how Adobe Muse solves a problem that’s been a thorn in the side of designers like myself for many years. Namely, the lack of a way to create functioning web page layouts without learning how to code. So before you cry foul and dismiss the very nature of this project on the basis that «all designers should code», I’d urge you to read my reasoning on this score. 90003 90002 If you remain unconvinced, then I bid you farewell.For the rest of you, let me share my experiences in getting hands on with Muse … 90003 90006 The basics 90007 90002 90003 You do not need to know code to use Muse 90002 First, a quick summary. Adobe Muse CC is a tool for designing websites without writing a line of code. In fact, unlike other tools, it does not even LET you code. 90003 90002 It bundles with the Creative Cloud, so you need a subscription to that service to use it. As a result, it integrates with all the other CC apps and services, including Typekit and Adobe Edge Fonts.90003 90002 You get 20GB of cloud storage when you’re a member of Creative Cloud, enabling you to access your website files when you’re away from your computer. You can share design mockups and live site demos with clients and colleagues. You can even let the website owners make changes to content on live sites through a browser (with the ability to retain control and accept or reject those changes). 90003 90002 Within the template-driven software, you can drag and drop to add custom navigation, slide shows, contact forms, scrolling effects and more to your websites.All the interactive widgets are touch-enabled, so you do not need to do anything extra to make them tappable on touchscreen devices. 90003 90002 That’s the theory, anyway — how does it work in practice? 90003 90006 Muse templates 90007 90002 90003 There are a ton of third-party resources for Muse CC 90002 I started working with Muse CC on a few typically small websites of five or six pages. I began developing sites both from scratch, and with templates from third-party companies that are selling a range of items to this new market.90003 90002 I worked with templates from Muse Themes, Muse Grid, Muse Layers, and Muse Resources. This last one bills itself as an «entirely free design resource for Adobe Muse». 90003 90002 Overall, the resources for Muse are great and appear to only be getting larger. They range from free to paid, to sharing with other users, to add-on widgets and enhanced functionality, to templates that cater to almost any general type of site you may be designing. 90003 90006 Familiar style 90007 90002 My first reaction to learning Muse and making my way around it was that it was not similar to InDesign as Adobe’s marketing had suggested.That’s fine though, as it’s still very much a familiar Adobe style program, which Flash and Dreamweaver never quite were. 90003 90002 In general, then, those coming from InDesign start at a good place. Those who cut their web chops with Flash, though, will have to come to terms with the fact that this is no longer a timeline-based interface. 90003 90002 Also of note is Muse’s good integration with Photoshop CC, which is always important to the design process and moving from mockup through production.90003 90006 Learning curve 90007 90002 90003 Parallax scrolling is one of the features included in the software 90002 Doing your actual layout work, one begins to see the challenges faced by Muse’s design team. While it’s obviously not a fully web compliant canvas and instead has more static components, it is not just patently ignoring the ways of the web the way Flash did. It’s a mix of static and moveable elements, of which we the designer have a good amount of control. So there is some getting used to which I for one, am still doing, and finding interesting.90003 90002 Expect a learning curve, both for the toolset, and also for the medium. I’m still getting up to speed with the aesthetics the pages the program puts out. Some pages look larger than I have expected, the word ‘horsier’ from advertising design circles comes to mind. I’m sure this is controllable in the design and layout process, and will continue to hone my control of such things in Muse. 90003 90006 Room for improvement 90007 90002 As of this writing Muse is up to version 7.4. And while it’s a solid program, it’s not without its share of foibles and oddnesses.Here are the top noteworthy items I came across: 90003 90050 90051 While working with Muse I often felt it was less than responsive, even on a powerful desktop workstation. Such sluggishness has been noted by many users. Simple page changes would take a few more seconds than it really should. Muse was apparently developed using Flash, Flex and AIR: could this be the source of its stodginess? I do not know, but I often had to remind myself I was working with a desktop application and not an often much slower web-based (i.e. Java) app. I’ll assume Muse will move past this as the program is further optimized. In the meantime, know that slower computers may have issues. 90052 90051 There were times when a simple line of text would not stay where I put it, and in preview would always reposition itself further north on the page. Taking that line of text in the LAYERS pallet and dragging it into a folder with other page items solved the issue. I’ll allow that this may be my own error in still learning what moves and what stays put.But it was not as intuitive as hoped for. 90052 90051 When in the PLAN mode, double-clicking one of the page icons would sometimes fail to open that page in the DESIGN mode and I had to resort to using the context menu (by right-clicking on the page icon, or 90056 Cmd -click 90057 on a Mac). On one occasion, some pages would not open at all and I had to reboot. 90052 90051 One item I find particularly frustrating is the fact that unlike InDesign, Photoshop and Illustrator, Muse is unable to proportionately scale blocks of text, either individually or if grouped with other graphic elements.You are instead forced to resize the text separately. If you happen to have variously formatted text in a single text box, you’re out of luck and must painstakingly reformat it all by hand. Ouch! 90052 90051 The tool palletes interlock in ways that would not allow comfortable configurations. For example, the very necessary LAYERS pallet could not be expanded vertically as far as needed, nor could it be torn off the other pallets to allow for functionality similar to other Adobe products. This meant I had to keep scrolling up and down it’s long list of items.90052 90063 90002 So there’s clearly room for improvement with Muse, although the way that updates are made via the Cloud means that hopefully many of these issues will be fixed in the background as time goes on. 90003 90006 Quality of code 90007 90002 For many, though, the main issue with Muse will be that it creates so-called ‘bad code’. And yes, the machine generated code that is created by Muse is, to humans, a mess. It is inefficient code by any standards. All true, and I agree I wish it was not the case.90003 90002 I tested some of what I created, again from scratch and from professionally made templates. The results were not quite as good as I had hoped for. While my ultra-simple sites worked with just about everything I tried it with, two of the template sites had troubles with browsers on Android. 90003 90002 We will not be able to expect to do much / any post-Muse work with the files. And if you can, the time spent will kill all the value you saved by using Muse in the first place. 90003 90002 In short, you’re unlikely to create a site in Muse that works as well as one that’s been handcoded by an experienced developer.But does that mean that you should not go near it? 90003 90006 Sticking point? 90007 90002 If you’re an experienced developer yourself, then I’d say yes. But if you’re not, I think it’s a case of recognising Muse’s limitations, and focusing what it can do and well as what it can not. 90003 90002 Programmers have long spoken of the importance of efficent (i.e. small) code to provide the fastest downloads. However, in the age of Netflix and YouTube gigafiles flying to your phone while on the commute to work, it may be time to lay this to rest.No Muse file is getting large enough to impede delivery of your site. 90003 90002 Muse’s compatibility with all the browsers and devices out there is more of a issue. One of the benefits of hand coding is its ability to add in fixes for compatibility with a wider range of browsers. But then if you were sold on hand coding, you probably would not be interested in Muse in the first place. So whether Muse is the best fit for a particular project really comes down to a cost-benefit analysis based on how complex the site must be, who your audience is and what devices / browsers they’re using.90003 90006 Plug ‘n’ play limitations 90007 90002 A number of folks have commented that there are so many limitations with Muse, because not having code, we are thus limited to the functionality that Adobe and third parties build into it via the program or plugins . This is true, and it is a reality of the platform. Adobe also reminds us that we can import many things into Muse, like animations files, but there are limitations. 90003 90006 Desktop v mobile 90007 90002 90003 You create separate layouts for desktop, tablet and phone 90002 Muse sites are not technically responsive in the narrowly defined sense: the program actually has separate modules for ‘desktop’, ‘tablet’ and ‘phone’ layouts .Functionally speaking, a desktop layout can be produced that should be very functional on most tablets over about 8in. Thus we can often get away with only developing two layouts, the desktop and phone. Still, it means developing two or more separate sites rather than one truly responsive one. 90003 90002 Is non-responsive a problem? I’ll be an outlyer from the masses and say not really. But in full disclosure, I am not a great fan of the concept, at least until it gets easier and more flexible to execute.Creating a truly responsive site that is also a pleasing design is not an easy thing to do. It takes longer than designing a non-responsive site. So in theory, one might be able to knock out that desktop and phone sized sites in Muse in far less time than creating a responsive site in Dreamweaver. Chalk this one up to personal call. 90003 90006 The future of Muse 90007 90002 In the last 18 or so months Adobe has released seven full-version updates to Muse, a huge number in such a short time. Despite this impressiveness, each release was not the equivalent of an old-style upgrade.Nonetheless, each brought the program up to the next level in a reasonably short time frame. 90003 90002 As long as Adobe continues this pace, and the issues keep getting ironed out, it is hard to see how anyone can have anything but praise for a program that adds to our toolkit in such a productive way. 90003 90002 90056 Review by: 90057 Lance Evans, creative director of Graphlink Media. 90003 .