Loading...

Follow Adobe Content Corner on Feedspot

Continue with Google
Continue with Facebook
or

Valid

Guest post by David Tristram, Senior Computer Scientist—Photoshop Engineering

Hi, I’m David Tristram, Photoshop User-Interface Engineer, and I’d like to tell you about the Microsoft Surface Dial device and how it works in Photoshop.

Microsoft’s new input device, the Surface Dial, is a simple and intuitive input device available to all users of Windows. The Dial is a conveniently hand-sized short cylinder that connects wirelessly to your computer. The Dial can be rotated continuously in either direction, and pushing down on it activates a micro-switch button. Microsoft automatically sets up the Dial to control common system operations like audio volume, undo/redo, scroll and zoom, and screen brightness adjustment.

The magic happens when Photoshop adds a Dial menu choice to set Brush properties. In Photoshop, the Dial offers six ways to change how you paint:

  • Size
  • Opacity
  • Hardness
  • Flow
  • Smoothing, and
  • Control

The first five parameters correspond directly to the Brush Tool Options that can be set using the Options Bar near the top of the application frame. Four of the options here should be familiar to users who have explored Photoshop brush tools earlier. The fifth, Smoothing, is a brush setting added in Photoshop CC 2018. Tap the Dial to select one of these parameters and then rotate to adjust the setting.

However, just as with the Options Bar, the first five Brush Options can only be changed between brush strokes.

The Dial’s sixth parameter, Control, is much more dynamic and flexible. Control can be assigned to any brush setting that has historically been controllable with the Pen. Any change in Control is reflected instantly in the stroke being painted! For example, the Dial Control can be assigned to modulate the stroke width. Rotating the Dial changes the width of the stroke from its maximum all the way down to zero. The Dial Control value always acts as a percentage that multiplies the Brush setting to which it is assigned.

The Dial Control is very powerful and can be assigned to any of the following:

  • Shape Dynamics settings
  • Size, Angle, and Roundness
  • Scattering settings
  • Scatter (distance), and Count
  • Texture settings
  • Shadow Depth
  • Color Dynamics settings
  • Foreground/Background Color Mix
  • Transfer settings
  • Opacity, Flow, Wetness, and Mix

Considerations for using the Dial Control

The Dial Control is a new and powerful way to control painting. Here are a few things to be aware of when you use it:

  • Dial is easier to change more abruptly than Pen pressure. Even though, in Photoshop, the Dial’s rotation sensitivity is better than a tenth of a degree, an artist can make rotations that can appear discontinuous while painting. To avoid this problem, choose maximum Brush setting values that are near the desired ultimate appearance, so that larger Dial rotations are required to accomplish the effect you want. That is, don’t use a Brush that is over 100 pixels in size if the ultimate size on canvas will be controlled by Dial to be only few percent of that size.
  • The Dial’s Fine Control Mode is another way to make changes more smoothly. To adjust any Dial value with finer control, rotate the Dial while pushing down. This gesture is a little tricky. If one presses without rotating, in short order, the top-level Dial system menu will appear. But if the Dial is also rotating, Dial will operate in the Fine Control Mode and values will change five times more slowly. Of course, you’ll have to rotate the Dial much further to accomplish the same effect, but the intermediate values will change in smaller increments and the final stroke appearance will appear smoother.

Nothing to do!

With the Dial, there are two situations where it can look like Photoshop is not painting anything!

  • The Dial Control can be any value, unlike Pen pressure, which is zero at the beginning and the end of every stroke. So, with Dial Control, paint strokes can start or end at any fraction of the current size. This setting is handy for making bold marks, but it is also possible to leave the Control at zero percent. If the Dial is not rotated, then an entire stroke could have zero width and it could seem like Photoshop just stopped working altogether! Photoshop tries to identify a few of these cases and warns you when a stroke is made with Control entirely at zero percent.
  • And of course, for Dial Control to control anything, it must be assigned to something that affects the resulting Brush stroke. Photoshop tries to notice you twirling the Dial when it is not assigned and will let you know. You’ll still have to figure out how to open the Brush Settings panel and find a setting to adjust.

Thanks for reading about Microsoft Surface Dial in Photoshop. Also check out our official Help page that explains the gestures in a bit more detail.

I do think that the Dial gives an entirely new kind of expression to Photoshop artists. I’ve had a lot of fun helping bring Dial control to Photoshop painting and I’m excited to see what people accomplish with it. Please feel free to drop me a line with your reactions and let me know how Dial works for you, and help me make Photoshop even better!

David Tristram

Photoshop User Interface Engineer, tristram[at]adobe[dot]com

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Guest post by Avinash Kumar Singh, Software Product Quality Specialist, Adobe

Are you looking for a platform to showcase your creative work and get rewarded for it? With Bridge CC, quickly upload your projects to Adobe Stock and be a part of an amazing community of creative content providers. Now, maximize the time capturing and creating content and minimize the time spent in submitting your work!

What all do you need?

To leverage the integration of Adobe Bridge and Adobe Stock, you just need two things:

  • Adobe Bridge 7.0 or later installed on your system
  • Your project in a folder that’s ready for uploading
File specifications for uploading to Adobe Stock
  • Only JPEG and raw files can be uploaded.
  • The minimum file size is 4 MB and the maximum is 50 MB.
How does it work?

Now let’s see how you can publish your work with a few clicks.

  1. Open your project in Adobe Bridge.
  2. Open the Publish panel.
    • Click Publish on the right side of your workspace.
    • Choose Window > Publish Panel.
  3. Click Adobe Stock Contributor in the Publish panel.
  4. If you haven’t accessed the Adobe Stock website on your system, then a Set Up button appears in the Publish panel. To create a connection between Adobe Bridge and Adobe Stock, click the Set Up button.
  5. The Adobe Stock Contributor website opens. Follow the instructions to create your profile. Once your registration is successful, open the Adobe Bridge window.
  6. In the Content panel, select the files you want to publish and drag them to the Publish panel.
  7. For raw images, Bridge displays a dialog to confirm the conversion of raw images to JPEG. Click Continue.

    A progress wheel appears in the Publish panel displaying the conversion and the upload status.

  8. When the upload completes, Adobe Bridge displays the following dialog box. To go to the Adobe Stock Contributor website where your project is hosted, click the Go To Adobe Stock button in this dialog box.
  9. On the Adobe Stock Contributor website, fill in all the requested fields for the title, keyword section, and category. Click Save and then Submit to complete your submission. For more information, see Adobe Stock | Upload your content.

Your creative work is now available to a wider audience and you can charge for these images!

We’d love to hear your thoughts and answer your questions; please post them in the comments section of this blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Guest post by Saurabh Verma, Software Engineer, Adobe

Using the latest version of Bridge CC (version 8.0), you can create custom contact sheets as per your needs. The new, powerful Output workspace in Bridge lets you easily select your media files including images and videos to create a contact sheet, personalize each property, and export it as a PDF document in just a few clicks. You can also choose to work with standard templates.

Unleash your creativity using the Output settings

Whether you want to create a greeting card or a 4 x 5 contact sheet for identification cards, Bridge has got you covered. Bridge promises truly personalized PDF contact sheets, with many customizable settings in the Output Settings panel.

  • Starting afresh, you can edit the contact sheet’s page size, dimensions, orientation, and color.
  • Want more control over image placement and the distance between consecutive images or the margins in your contact sheet? Just manage it with Grids & Margins.
  • Add your favorite header or footer or both to the contact sheet with options to customize placement, text size, style, and color.
  • Want to sign your contact sheets? Now, create text or image watermarks and customize its placement, rotation, and scale.
  • Create immersive PDFs with transitions and playback capabilities while managing security with the Open & Permissions settings.
Isn’t this great? But from where do you start?

Start by downloading the latest release of Adobe Bridge CC (October 2017 release | version 8.0) from the Creative Cloud Desktop application or via adobe.com. As soon as your installation is complete, launch Bridge and switch to the Output workspace by choosing Window > Workspace > Output.

If you need step-by-step help with the procedure, follow the instructions in this article: Create PDF contact sheet in the Output workspace

We’d love to hear your thoughts and answer your questions; please post them in the comments section of this blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

As a game developer, how often have you wished you could pass on the run-time camera controls to your users when they play your animated game?

As a gamer myself, I often wished I could control the camera movement by focusing the camera on certain objects during the animation. While developing a game, you will find it difficult to provide this runtime feature to your end users with a static camera.

Adobe Animate provides the perfect solution to your interactivity woes! You can now use APIs to provide run-time control on camera features such as location and movement. In addition to this, you can mask the camera, zoom, pan, rotate, add color effects, and pin camera to any object in animation. If you are not familiar with writing scripts in Animate, here’s some good news! Animate has introduced a simple and intuitive code wizard, that automatically generates code without your intervention.

Read on for a step-by-step tutorial to learn how to use camera APIs in Animate CC. Here are the assets that can help you get started:

Click here to download the samples.zip file. It consists of:

  • runtime-camera.fla  – source file for interactive camera elements animation
  • camera-mask.fla  – source file for camera mask usage at runtime

In the sample file, you can see a dog on jet pack and a pig on parachute moving around an urban landscape. At runtime, you can control and focus the camera on these two objects.

A step-by-step approach to creating animation using interactive camera is depicted in the following flow diagram.

Create animation with an interactive camera
  1. Create objects on individual layers in Animate by using drawing tools of Animate. For example, add parachute object on pig-parachute layer, jetpack object on Dog_Jetpack layer, and so on.
  2. Add camera to the timeline by clicking the camera tool in Animate tool bar.
  3. Add tweening to layers (Insert > Create Classic Tween). In this sample, we have used classic tween.
  4. Click Windows > Actions to open the Actions window.
  5. Click Add using wizard in Actions window, to open the actions code wizard.
  6. Create actions such as attach layer to camera, camera panning, and camera rotation by selecting them from the list in Add using wizard window.
  7. Click Next and add triggers for the corresponding objects.
  8. Click the frame on left pane to edit code for adding additional API methods and parameters as per your requirement.
  9. Click finish and play.

The above video demonstrates the usage of interactive camera by focusing the camera on parachute, jet pack, and the urban landscape at various intervals.

For more information on actions code wizard, see How to use actions code wizard.

You can also mask the objects in animation at runtime (for Action Script 3 document type) using the following camera API code:

import fl.VirtualCamera;
fl.VirtualCamera.getCamera(root).setCameraMask(torch);

Here is a sample screenshot from the animation, when using an oval shaped mask:

If you have any further queries or feedback, you are welcome to leave a comment at the end of this blog.

For more information on layer depth and camera enhancement features in Animate, see using advanced layers and using camera in Animate CC.

For more information on all the features introduced in October 2017 release, see New features summary.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Guest post by Siddharth Singh, Software Engineer, Adobe

Whether you are a photographer or a creative designer, you know the importance of having all your creative work lined up beautifully in the form of a portfolio to impress prospective clients. If you’re looking for the best way to build an online portfolio of your work, Adobe Bridge CC has a solution for you!

With the new Adobe Portfolio publish service introduced in the October 2017 release of Bridge CC, it is now super-easy to showcase your work to the world. You can now create and publish a website featuring your creative work in just a few clicks. If you are an existing Creative Cloud member, you can start using the Adobe Portfolio service right away. Adobe Portfolio is included in your Creative Cloud subscription.

Let’s get started

Before you begin using the Adobe Portfolio publish service in Bridge, make sure that you sign in to the Creative Cloud desktop app using your Adobe ID. Then, launch the latest Adobe Bridge CC (October 2017 release). You’ll see the Adobe Portfolio option in the Publish panel of the Essentials workspace.

Click the Adobe Portfolio option to open a section where you can drag and drop your files. Select multiple files and drag them onto the Publish panel. You can select images and audio and video files to create a project in Adobe Portfolio. For detailed steps, see Publish assets to Adobe Portfolio.

When your files have been uploaded successfully, Bridge displays a message on your screen with the link to your newly created Adobe Portfolio project. In case your network goes off during the upload, don’t worry! As soon as the network connectivity is restored, Bridge will retry to upload your files.

How Bridge handles RAW image files

If you shoot your photos in RAW format and have large image files, Bridge automatically converts your files into lighter JPEGs and uploads them to the Portfolio website. This saves you from the hassle of converting the files to RAW and speeds up the process of uploading files. Besides images, Portfolio also supports video and audio files. You can find a list of supported file formats here.

Upload is successful! Visit your website

One important thing to remember is that project created from Bridge does not get published automatically. You need to go to the Portfolio website to publish it.

When you open your project on the Portfolio website from Bridge (after logging in to the Portfolio website with your Adobe ID), you can choose how to display your work and customize as per your needs using the Portfolio project editor.

After making the desired changes, you can publish your project immediately and make it available to the world.

Great! What’s next?

Adobe Portfolio offers easy-to-customize layouts that are designed specifically with creative professionals like you in mind, so that you can showcase your best work. See what you can do with Adobe Portfolio to learn more about this service.

With access to the Adobe Portfolio publish service from within Bridge, you’ll find that sharing your creativity has never been this easy. You can also publish and sell your images using the Adobe Stock Contributor service from Bridge CC’s Publish panel from the enhanced user interface in the latest release of Bridge CC.

We’d love to hear your thoughts and answer your questions; please share them in the comments section of this post.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Guest post by Siddharth Singh, Software Engineer, Adobe

Adobe Bridge offers many powerful features to effectively manage your digital assets and is used in many ways by the creatives. For smooth interoperability with the Creative Cloud applications, Bridge has become an essential part of the established workflows for the Creative community. Scripting in Bridge using ExtendScript enables users to customize Adobe Bridge as per their specific requirements. Whether it’s bulk metadata updating or image processing, Bridge has been used to perfect many different types of automated workflows.

With CEP integrated into Adobe Bridge CC 2018 (October 2017 release | 8.0), workflow automation has just got easier. With the arsenal of web technologies at your disposal, designing complex and beautiful extensions is a breeze. If you are a web developer or have a basic knowledge of HTML, JavaScript, and CSS, you’re all set to extend Bridge functionalities as per your requirements now!

So, what’s workflow automation?

In case you are wondering about the need for scripting or workflow automation, think of a scenario where you have to convert your latest photoshoot’s RAW photos to JPEGs, add watermark, tag keywords, add copyright in the metadata, and then upload the photos to a cloud-based web service for your client. This is a workflow! Now, if you have to do all these tasks every time you do a shoot, wouldn’t it be convenient to have an automated solution – you just select the files and the solution does all the steps of your workflow efficiently. That’s where CEP and Bridge scripting can do wonders.

What is CEP?

CEP or Common Extensibility Platform (formerly known as CSXS – Creative Suite Extensible Services) is a shared technology, which provides a rich platform to create and run HTML5-based extensions across Adobe Creative Cloud products. The extensions created using the CEP framework extend the functionality of the host application, using HTML5, JavaScript, ExtendScript, and CSS. With CEP in Bridge, developers having knowledge of web technologies like HTML5, CSS and JQuery can extend the functionality of Bridge and automate complex workflows easily. Just for the geeks, CEP makes use of Chromium Embedded Framework (CEF) to render HTML, giving you the full power of a browser behind your panels.

With CEP, you can easily design your complex user interfaces for panels or dialogs using CSS and jQuery, just like any website. Moreover, Node.js\NPM support in CEP brings in the whole node ecosystem and tons of third-party packages to meet every requirement. In combination with these technologies, you can also use ExtendScript as before to automate Adobe applications-related workflows along with CEP. Adobe Creative Cloud Libraries, built using this technology, lets you communicate with other Creative Cloud apps, such as Photoshop and Illustrator.

Working with CEP and ExtendScript

ExtendScript was designed by Adobe to add more capabilities to JavaScript with a purpose to extend the functionality of Adobe applications. CEP and ExtendScript play well together and complement each other. While CEP provides the power of web technologies inside the Bridge panels, ExtendScript provides the automation capabilities needed to support your workflows.

And, you can sell your add-ons!

If you have designed a cool extension for Adobe Bridge that can help others as well, you have got a marketplace to sell your creation! Adobe Exchange portal is the marketplace for CEP-based extensions and now supports Adobe Bridge. To monetize your extension, all you have to do is to create and upload your extension on the Adobe Exchange portal.

What all can you do using CEP?

If you use Bridge to manage your processed creations, how about creating CEP extensions to share your content on Facebook, Flicker, Behance etc. directly from a Bridge panel? If you wish to share your creations locally in the form of an image gallery, Bridge and CEP are the tools to use. You can also store your assets in the cloud, like Adobe Creative Cloud Assets website, Google Drive, or similar web-based storage solutions from the Bridge panel using CEP. If you still use emails or shared drives to get peer feedback for your creations, how about creating a real-time asset review panel for it using web sockets? With the power of ExtendScript and features like XMP SDK and Vulcan APIs, it is easy to operate on the metadata of your files and communicate with other Creative Cloud applications. These are just a few ideas, the possibilities are endless with Bridge-CEP integration.

What all do you need?

If you have the latest version of Adobe Bridge CC and a text editor, you are good to go! There is plenty of documentation for CEP to help create and monetize your extensions. The best place to start is Adobe CEP GitHub page, which includes lots of CEP-related documentation and samples.

Bridge documentation is available here along with some samples to get you started. You can download the latest Bridge CC 2018 SDK from here. So, just expand your creative wings and start creating powerful extensions to enhance your workflows!

We’d love to hear your thoughts and answer your questions; please post them in the comments section of this blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

In collaboration with Kalika Arora

Tired of posting stills on your social networks? Try learning easy techniques to create short, innovative videos of your creative work and spice up your posts. Start off by screen-recording your creation on your device, step-by-step from scratch. Once you have the video clip, you’re ready to apply quick, fun edits to your video using Adobe Premiere Elements.

To find out the supported file types in Adobe Premiere Elements, see Supported file formats.

Here’s a tutorial on how you can play with the clip speed and add dramatic motion effects to your video, using the Time remapping feature in Adobe Premiere Elements. Let’s take an example of a sketch demonstration and apply Time Remapping to it to achieve this video:

Curious to learn how to achieve the slow and fast motion effects? Let’s get started.

  1. Launch Adobe Premiere Elements and click Add media in the upper-right corner of the screen to import the video clip that you want to work with.

2. Select the option to import media and choose your clip.

3. Select the Quick edit mode in the upper panel of the screen to quickly work with video edits.

4. Click the Tools icon  in the right panel of the screen and select Time Remapping from the displayed options.

The following screen appears:


The highlighted section displays the CTI

Adding a slow motion effect
  1. In the timeline panel at the bottom which displays every frame of your video, move the CTI to the frame from where you want to apply the effect.

2. Click Add TimeZone from the bottom panel.

3. Now move the handles on the timeline to indicate the start and end frames for which you want to apply the effect on. In this video, this effect has been applied at the start of the video clip to showcase the plain sketch in slow motion.

4. Once you’ve selected the frames (indicated by the green color), select an effect from the given options in the bottom bar.

5. Move the slider to the desired effect ranging from Extremely Slow to Normal, to apply a slow effect.

6. Click Done.

7. Adobe Premiere Elements will take you back to the Quick edit mode screen. Place the CTI at the first frame and click play to view the effect.

You can delete frames by clicking the Split Clip icon on the CTI or pressing Ctrl+K, at the start and end of the video segment you want to delete, and click Delete. To know more, see Split clips and Trim Clips.

Adding a fast motion effect

To add a fast motion effect, follow steps 1-3 given in the previous section and continue with the following procedure.

1. Using the handles, the coloring-in part of the video is selected.

2. In the bottom panel, move the slider to any effect between Normal to Extremely Fast to apply a fast motion effect.

3. Click Done.

4. In the Quick mode screen, click  to view the applied effect. If you’re not happy with the effect applied you can click  and re-apply the effect.

In the Time Remapping window, you can find the following options:

Frame Blending Smoothen the appearance of frames in slow motion. Make sure to render the video afterwards in the Quick edit mode screen, by clicking Render.

Reset Remove the applied effects and start over.

Duration Length of the selected video segment, in seconds.

Easing In Slows down the transition while entering a frame.

Easing Out Gradually fastens the transition while leaving a frame.

This way, you can apply slow and fast motion effects to different segments of a single video. Once you’re happy with the effects applied, you can now export and share your video clip. To do this, click Export and Share in the upper-right corner of the screen. See Export and Share your video for more details.

Now that you know how to work with Time Remapping, are you excited to create fun videos using these effects? In true Christmas spirit, let’s allow our creative juices to flow, light up our ideas, and turn them into reality.

Want to learn more about what Adobe Premiere Elements can do? Take a look at the array of tutorials available to find out more creative edits and get the best out of your work.

Here are some useful links:

Get cracking! Good luck!

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

In collaboration with Gauri Arankalle Panicker

Are you tired of transforming your vector drawings in the same tedious way, adjusting each path and anchor point? Get the latest version of Illustrator CC and discover the new Puppet Warp tool.

You will find step-by-step instructions for how to use the Puppet Warp tool to modify your artwork in the following articles:

But before you dive into using the tool, let’s look at a few examples where a simple artwork has been made funky using the easy-to-use Puppet Warp tool.

Effortlessly model your character using the Puppet Warp tool

Easily mold text using the Puppet Warp tool

You can do more with these funky drawings. You can work with them in Photoshop and create spectacular frame animations in a few steps. Take a look at the following examples:

Want to learn how to create such animations? Just follow these steps!

  1. Select your artwork in Illustrator CC

In Illustrator CC, select the artwork you want to transform.

  1. Transform using the Puppet Warp tool in Illustrator CC

Select the Puppet Warp tool from the Tools panel. Then, add pins by clicking the areas you wish to transform and those you wish to anchor in place. To transform your artwork, click-drag a pin or move the dotted circle that appears when you position the cursor near a pin.

  1. Create and export frames using Illustrator CC

Now, let’s create multiple frames for the GIF using this tool. Alt/Option-drag the artboard and transform your artwork again using the Puppet Warp tool. Continue this step until you get the desired output. Use the Export For Screens command to export your frames.

  1. Import frames into Photoshop CC

It’s time to launch Adobe Photoshop CC. Create a new document and add the frames that you’ve created in the previous step. Adjust the timings of the frame in the Timeline panel and select the desired looping option.

If you need help with the procedure, follow the instructions in these articles:

  1. Export your frame animation as a GIF using Photoshop CC

Export your frame animation as a GIF using the Save For Web command.

Don’t restrict yourself to graphics! Create text, transform it using the Puppet Warp tool in Illustrator CC, and come up with frame animations using Photoshop CC.

Give the tools a spin! And add your comments to this post – we love to hear from you.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Are you a Dreamweaver user who has experienced frustration with issues like file overwrites, lost files, or updates being made to the wrong version of a file? No matter how efficient you are or how hard you try, it is virtually impossible to work without a good version control system.

If you are a coder, Git needs no introduction. For the uninitiated, Git is a free, open-source, distributed version control system that helps you manage your files and code. As a web designer or as a developer who uses Dreamweaver CC, you can now use Git to maintain many versions of your files, manage source code in a secure repository, and collaborate real-time with other users.

To use Git from within Dreamweaver, you need to first download a Git client and create a Git account. If you’re already working with an existing Git repository hosted on Github, Bitbucket, or other popular hosting services, you simply need to sign into your Git account. Now, when you open the latest version of Dreamweaver, the app automatically picks up the location of your Git executable file. You can go on to initialize a new Git repository or clone an existing repository.

After initializing or cloning a Git repo, you can view all the files and folders that are related to your project in the Files panel. Notice that there is a new Git View icon in the Files panel. Click this icon to view all the files that are associated with a Git repository.

Git automatically categorizes your files as untracked (displayed in green), modified (displayed in yellow), and committed (displayed in white).

When you initialize a repo, the files are untracked. When you edit a file and save the change, the files are modified. Unless you commit your changes to a repo, the edits are saved only to your local system.

Dreamweaver includes a new Git panel (Window > Git) to let you perform actions such as Commit, Push, and Pull.

There’s more! You can create and manage remote Git repositories, too, from within Dreamweaver. Remote repositories allow you to access a repository that is hosted in another network. This means that you can use remote connections to easily share your files and updates, and collaborate with other users. To create a remote connection, click Create Remote in the Git panel.

Download the latest update to Dreamweaver CC today from your Creative Cloud desktop application, and start using Git to manage your files. Leave a comment to let us know if this feature helped you.

Detailed instructions on setting up Git and integrating it with Dreamweaver are available in this Help article: Using Git in Dreamweaver.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Adaptive forms in Adobe Experience Manager are new-age forms. These forms change their appearance based on the screen size of the device and are interactive in nature. These forms also integrate with Adobe Analytics and Adobe Campaign. Using adaptive forms, you can deliver personalized and targeted experiences to users based on their demography and other features. It is easier to create and manage the forms when a proper process is followed. This blog walks you through the various stages of designing adaptive forms.

First of all, make sure that you have put together the right team of contributors. You need a product manager/owner to provide requirements and approve the design of the form. You can play this role yourself if you have a good understanding of the requirements. Otherwise, find someone from the organization who can provide the right input. You also require an experience designer to design the appearance and flow of the forms for multiple devices, a business user to define the workflow and rules, a developer to create templates and JavaScript libraries, and a form author to create the forms.

The adaptive form design process has multiple stages. You can run some of these stages in parallel to each other.

Adaptive form design stages
  • Prepare business requirements: A product manager defines business requirements for the adaptive form. Business requirements include the purpose, target audience, and target devices (desktop, tablet, or mobile) for the form. The product manager can also share a skeleton of the form. It helps the experience designer and the business user get started with designing the form. A product manager is the owner and final approving authority for the form.
  • Prepare design documents: An experience designer works with the product manager to create the design specification document, data flow diagrams, error specification documents, and services documents for the form. These documents form the layers of an adaptive form.
    • Experience design document: An adaptive form can have different designs for different target devices. The experience design document contains the visual design and workflow of a form for all the supported devices. This document serves as the base document for designing the template for the form. A sample experience design document with designs for mobile and desktop versions of an adaptive form is displayed below:
       Click image to download a sample experience design document
    • Design specification sheet: The design specification sheet contains information about alignment, spacing, color, font, width, and height for each of the components of a form. The document also provides padding-related information for the form. The design specification sheet for an example adaptive form is displayed below:
      Click image to download a sample design specification sheet
    • Data Flow Diagram (DFD): A DFD document depicts data types, field names, maximum length, minimum length, default states, decision points, and rules for each field in the form. Rules help build complex logic in adaptive forms. The document is quite helpful and a big time-saver for the form authors. The document preempts all the information that the form will capture from the user.  An adaptive form can directly access information from WSDLs and REST APIs. The DFD document also provides names of WSDLs, REST APIs, and respective methods to use. The DFD document for an example adaptive form is displayed below.
      Click image to download a sample Data Flow Diagram document
    • Error specification document: You can apply validation to each field of an adaptive form and display help/error messages associated with each validation. Generally, there is a different error message for every field. The error specification document provides help/error messages for each and every field. It also describes the location, font, color, and other formatting options for the error messages.
      Click image to download a sample error specification document
    • Color style sheet: The color style sheet is the color palette of all the colors used in the adaptive form. It also specifies the name, size, and color for the fonts used in an adaptive form.
      Click image to download a sample color style sheet
    • Additional documents: Design specification documents are devoid of detailed options of a drop-down or list box. You can include such information in additional documents.
  • Create adaptive form templates: A template has the structure and initial content of an adaptive form. It helps create forms with a consistent appearance. For example, you can create a template to make all form authors have an identical header, footer, navigation menus, and a Submit button for all the enrollment forms. Adaptive forms provide a template editor to create templates.
  • Create client libraries: Modern websites rely heavily on client-side processing driven by complex JavaScript and CSS code. Organizing , optimizing, and serving such code can be complex. To help deal with this issue, AEM provides Client-side Library Folders, which allow you to store your client-side code in the repository, organize it into categories, and define when and how each category of code is to be served to the client. For information, see AEM Client Libraries explained by example by Feike Visser.
  • Create the adaptive form: Use a template to create the adaptive form. Lay out the fields as described in the design specification document for all the supported device types and test the layout using the preview functionality. There are a few best practices to develop efficient forms. For details, see Best practices for working with adaptive forms.
  • Create and apply rules: Apply rules and add error messages to the fields of the adaptive form as described in DFD and error specification documents. Rules are triggered on form objects and the form itself based on user input. Rules can directly access information from WSDLs and REST APIs. Use the services document for information about WSDL and REST APIs. Adaptive forms provide a rule editor for creating rules.
  • Create and apply themes: Create a theme to reflect the style/appearance described in the design specification document and error specification document. A theme contains styling details for adaptive forms. You can reuse a theme in different forms. Styles include properties such as background colors, state colors, transparency, alignment, and size. When you apply the theme to a form, the specified style reflects on the corresponding components of the form. Adaptive forms provide a theme editor to create themes.
  • Create form fragments: An organization generally has tens of thousands of forms. These forms also have a few common fields, such as personal information, communication address, permanent address, and financial details. You can convert such common fields to form fragments and later use these fragments in other forms, as required.

Now, your adaptive form is ready. You can send the document to the product manager for approval and publishing schedule. For any change in the form, update the corresponding design document and communicate the changes to the form author. It is easier for a form author to follow the visual representation and update the form.

After the adaptive form is published, you can use Adobe Analytics to track the page views, browser types, and demography of the users accessing the form. Create a slightly tweaked version of the form and do A/B testing to identify the better performing version of the form. Keep tweaking and improving the performance of the forms.

Read Full Article

Read for later

Articles marked as Favorite are saved for later viewing.
close
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview