Creative and Collaborative Web Design

Changes in the Creative Process

In today’s arena, ideas are no longer communicated strictly visually, but interactively. Responsive Design has changed the game: Web designs are no longer static, but need to provide different layouts to devices based on the size of the browser window.

Understand limitations, and small things designers can do to make the hand-off to the developer a smooth transition. Designers are ensuring their designs translate better into a web-based medium with a basic understanding of programming languages.

The Creative Process and the Developer

It’s imperative that graphic designers and developers collaborate. Too often a designer has a vision…promises the client…and runs into a wall when they take it to the developer. Below are the 5 steps to the creative process, and where the developer fits.

dev-infographic

Identify

  1. Understand the project, research, prepare and brainstorm. Investigate your audience, and how to achieve a visual solution to the problem. What is the purpose of the website? Ask relevant, targeted questions of the client and understand their motivations. Where the Developer fits in: The developer should attend initial client meetings to ensure form follows function. Find out clients needs both immediate and long term. A simple portfolio site could eventually end up as an ecommerce stock photo site. Allow the developer to have input on technological possibilities and limitations.
  2. Saturation
    Synthesize ideas using imagination. Conceptualizing themes and examine possible angles and directions. Begin to more clearly visualize an idea that captivates. Where the Developer fits in: This step is largely creative, but the developer should be kept in the loop. If the designer comes up with an idea that involves interactivity, or a shift in the user experience it’s best to run it by the developer to ensure feasibility.
  3. Incubation
    Let your ideas mature. Evaluate your idea and make sure all pieces of the puzzle really fit together. Revisit the original goals of the client and switch gears accordingly. Does it make sense? Is it fulfilling the goals in the Identify phase? Where the Developer fits in: Collaborate with the developer to ensure everyone is on the same page. Both designer and developer talk about how the ideas relate to the user experience, and how those ideas will be realized on the development side.
  4. Conceptualization
    After mulling over several ideas, you’re ready to start compiling your ideas. Look for ways to be inspired, and filter out concepts that don’t fit. Make sure both form and function are given equal balance. Where the Developer fits in: Collaboration ramps up between designer and developer. A developer typically thinks about how a page is going to work, not how visually pleasing it is. Designers need to be present so both needs are met. Manage expectations by strong communication.
  5. Execution
    Turn your ideas into the final product. Follow continuity and consistency throughout the process. The developer now takes over a large part of the process. Where the Developer fits in: The developer should have a strong grasp of what  is required, and the designer must understand that much of the development is “behind the scenes” programming that isn’t immediately resulting in a visual product. The designer is kept in the loop to ensure the vision is consistent.

So What do I do?

Following these steps are very important for every graphic designer. Also knowing how to leverage the tools we already use, such as Photoshop or Illustrator is important. A class such as Web and Mobile Design with Photoshop CC helps designers understand how to use grid systems, and properly create and save files so the developer’s job is easier.

Groups like Ascend Training also offer many free seminars helping you to make the transition from simply a designer to a well-rounded professional.

 

Adobe Creative Cloud Guide

In May of 2013, Adobe walked away from selling boxed-versions of software and moved exclusively to selling subscriptions to software such as Photoshop and InDesign. What does that mean for you?

What is Creative Cloud?

Adobe’s Creative Cloud, CC replaces the old model of Adobe “CS.” Users pay a monthly fee to access Adobe’s entire software library, cloud storage and more. You are able to install the software on 2 computers, Mac or Windows.

  • Full versions of the Adobe desktop applications: Adobe Photoshop, InDesign, Illustrator, Dreamweaver and more
  • Services to help create mobile-ready websites, content and apps
  • 20GB of cloud storage
  • Access to Béhance ProSite for portfolio development and hosting
  • 1 Year commitment billed monthly (yearly billing also available)
Guide to Adobe's Creative Cloud Software

Guide to Adobe’s Creative Cloud Software

Share this Image On Your Site

Please include attribution to AscendTraining.com with this graphic.

I use Photoshop, does that mean Photoshop is “in the cloud” like Google Docs?

No. The software is installed on your computer, but a license check is performed every 30 days. Photoshop and your files reside on your hard drive, just like before. You will need internet the first time you install CC.

If I cancel my subscription, do I lose my files?

No. You will need to make sure you save your files as compatible formats with earlier versions.

What exactly do I get with my subscription?

Acrobat Professional
After Effects
Audition
Bridge
Digital Publishing Suite (DPS)
Dreamweaver
Edge Animate
Edge Inspect & Edge Code
Edge Reflow
Edge Web Fonts
Flash Professional
Ideas
Illustrator
InCopy
InDesign
Kuler
Lightroom
Muse
PhoneGap Build
Photoshop
Photoshop Touch
Prelude
Premiere Pro
Scout
Speed Grade
20 GB Cloud Storage
Béhance Online Portfolio
Adobe Typekit

Any other benefits?

This is a big change for those in creative communities. One real benefit is that this model helps facilitate team-based workflows. If you have multiple people working at an organization, Team Licenses is the way to go. Team licenses give management the ability to add users, transfer software to a different user, or revoke licenses. So if someone quits, it’s very easy to transfer their license to the replacement employee.

 

So You Want to Develop Websites?

So You Want to Make Websites: Which Camp do you Fit Into?

The face of the internet is provided by two very different groups: Web Developers and Graphic Designers. They both have different roles with their own unique purpose. Graphic Designers fit on the creative spectrum, and excel in telling a visual story with branding, logos, banner ads, websites or any other visual imagery. Website Developers have the less creative job of planning and programming websites. They use programming languages to set up the structure and functionality of websites.

So the question is this: Are you a warm fuzzy creative person who needs to get that exact shade of purple for your logo, or are you a technical person who can’t live without clean code?

While there are some exceptions, designers and developers are usually 2 very, very different people. That said, there’s no law that Graphic Designers can make themselves more valuable by learning some code, and programmers can’t find their way around a pixel.

web-design3

Share this Image On Your Site

Please include attribution to AscendTraining.com with this graphic.

The Graphic Designers Role

graphic-designerThe creative person in the process is extremely important. If websites were all code and no graphics, the intent would be a pretty dull place. It’s the graphic designers job to gather all the information from the client and gain clear objectives. The Graphic Designer then creates different visual concepts that reflect the message the client requires. In most cases, then they hand off their images to the developer to put the pieces together.

The Web Developers Role

The Web Developer (or programmer) sets up the structure and code to create a website. They are also responsible for interaction between databases to create things like registration pages or shopping carts. Web Developers use such technologies as HTML, Javascript and CSS.

What’s the Job Market?

Now you know where you fit, what about getting a job? The US Department of Labor Statistics describes Graphic Designer as someone who creates visual concepts to communicate ideas. In 2012, the median pay for Graphic Designers in the United States was $44,150, with 259,500 jobs. The job outlook was expected to increase at a rate of 7%, slower than average.

Web Developers are described by the US Department of Labor Statistics as those who analyze needs and implement web content through code. In 2012, Web Developers in the United States had a median pay of $62,500, with 141,400 jobs. The job outlook was expected to increase at 20%, faster than average.

Graphic Designer/Web Developer Morph

So we see that the job outlook for Web Developers is pretty hot. Graphic Designers don’t have to be left out in the cold when it comes to the programmer mentality. A new trend is that Graphic Designers are breaking barriers and learning code.

This is a great idea because:

  • Graphic Designers can better prepare their images and understand coding roadblocks: What we see on the web can be radically different from the PSD or AI file. Learning code helps make the transition from Photoshop to HTML more seamless.
  • Better communication with programmers makes the process much, much easier. Designers don’t need to be a coding guru, but being able to talk the talk makes the walk much easier.
  • Graphic Designers can make smaller changes on their own without constantly running to the programmer.
  • They become more valuable: It’s a new world of cross-training. Adobe InDesign users are creating iPad apps with DPS, and Photoshop and Illustrator designers are learning HTML and CSS to become more valuable employees.

“Learning HTML and CSS creates a really valuable way for people to efficiently design for the web. For every pixel I put down in photoshop, I know exactly how I’m going to code that in HTML and CSS.” – Asher Hunt, Head mobile designer at LivePerson.

win-win strategy

So yes, according to the US Department of Labor Statistics, Web Developers make more money. But that doesn’t mean the creative visual designers have to be left out in the cold. By learning as much HTML and CSS as possible, Graphic Designers can make themselves more valuable, and elevate salaries.

The bottom line is that Graphic Designers learning code creates a “win-win” scenario for jobs and salaries.

– Jori Curry

Intelligent Upsampling in Photoshop CC

The Image Size Window and Intelligent Upsampling

The Photoshop Image Size window has received a major update! The new upsampling and downsampling algorithms allow for better results in enlarging and reducing the size of your images. Downsampling has always been a more manageable option, since you are simply omitting pixels. The only problem area has been that images tend to lose detail. Photoshop CC offers us the option of Bicubic Sharper, which helps retain detail when downsampling.

Intelligent Upsampling means you can take a low resolution image and make it print-ready!

Image-Size

Upsampling has always been the thorn in our side. Enlarging images in Photoshop means you are asking it to “invent” pixels that were not there previously. We often ended up with blurry images with a lot of artifacting. The new Preserve Detail algorithm does a MUCH better job of preserving edges. You can manually choose Preserve Details or Bicubic Smoother to get better results.

Upsampling Options

  • Automatic: Photoshop evaluates the image and resamples based on what type of image, and whether you are scaling up or down.
  • Preserve Details (enlargement): Photoshop uses a Noise reduction slider to decrease noise when enlarging images. This would be helpful if you have an image with a lot of detail, like a map, or photos of jewelry.
  • Bicubic Smoother (enlargement): This is based on Bicubic interpolation and produces smoother results. Best for images like landscapes or close-up face shots.
  • Bicubic Sharper (reduction): When you are reducing the size and need details to retain detail.
  • Bicubic (smoother gradients): This method gives you the best gradients.
  • Nearest Neighbor (hard edges): Preserves hard edges and creates a smaller file. Can result in jagged effects. Not a great option.
  • Bilinear: Adds pixels, not a great option.

Color Calibration for Adobe Photoshop CC

Monitor Calibration: Why is Calibrating your Monitor Important?

Monitor calibration is very important when you are working with color images, especially in Photoshop. The problem is that what you see on your monitor and what is printed out can have a marked difference. There are standards for color spaces such as sRGB and CMYK. These color spaces covers a different “gamut” or color range and each has specific applications, such as sRGB for web images, CMYK for printing.

  • Your goal is to set your monitor to a color temperature of 6500K and gamma of 2.2.
  • Choose View > Proof colors to see it on your screen more accurately as a CMYK.
  • Your monitor is not a 100% representation of how your file will print.
  • Take the final printed piece and hold it up to your monitor, and make adjustments accordingly

Calibrating your Monitor

Mac and Windows both feature basic color calibration within the operating system. This is at a minimum a step in the right direction, but we suggest using a color calibration system such as the Datacolor Spyder4Pro S4P100 Colorimeter for Display Calibration ($149). This device These devices appear similar to a computer mouse, and hang from the top of your monitor while some software runs color calibration tests.

  • Make sure your monitor is on for at least an hour before calibrating.
  • Light reflects off of everything: You are working in a room with magenta walls…that reflects on your monitor. Different colors affect your perception of colors on your screen.
  • Your desktop color affects what you are seeing also. Your best bet is to use a neutral gray desktop.
  • Make sure no light is shining directly at the display.

Free Calibration

  • Windows: Go to your Start > Control Panel > Adobe Gamma
  • Mac: Apple > System Preferences > Display

Best Reasons to Calibrate

The issue is that no matter what you do, what you view on your monitor and what is printed are different. Color correcting by the numbers, which offers a foolproof method to get consistent, accurate color.

If you’re creating images for the web, it’s especially important to make sure your monitor is calibrated. If you ever get a call from a client saying “This file on the web is purple!” Your response could be “I calibrated my monitor yesterday, and my color is not purple, would you like me to show you how to calibrate your monitor so we are on the same page?”

Professional Calibration

There are a bunch of hardware/software solutions out there, such as the Spyder Pro. They range from $60-$250.

Color Correcting by the Numbers

In reality, when we color correct in Photohop we use a numerical system. This means that even if you monitor looks perfect…the numbers of shadow and highlight override what you see on screen.

That said, many of us are designing for the web. This means you should have the best possible color, and understand that many people may be viewing it on a monitor that is NOT calibrated. Your client may be up in arms that his logo looks purple, but on your monitor it looks perfect. It’s always best to make sure you are working with the best possible calibration, even if your audience is not.

Field Blur, Iris Blur and Tilt-Shift in Photoshop CS6

Field Blur, Iris Blur and Tilt-Shift

Tthere are some fabulous new blurs available in Photoshop CS6! Blur settings are integrated into the interface and they don’t open in the separate window. Now let’s use Field blur on this image. You can change the blur level by rotating the circle in the center of the image:

Field Blur

This is the easiest to use, but doesn’t allow for as much control as the other two. Simply click on the image to add “pins.” These pins will have a blur range from 0px to 100px. In the image below, note that the pins on the faces are set to 0px, while the pins in the background are anywhere between 15 and 25px. You can manually drag the Blur slider to the right or left, or drag the outer ring outside the pin to the right or left.

Iris Blur

Previously we would have to use an alpha channel to get a shallow depth of field. With Iris Blur, you can achieve this with no masks or Alpha Channels. You can place a point to choose the area that will be in focus. That point is the center of the ring, and as the ring expands, the blur increases. You have complete control over the amount of blur, the brightness and color of bokeh highlights.

 Tilt-Shift

The Tilt-Shift blur is a photographic technique that gives the illusion of a miniature effect, adding depth to certain areas. It also can be used for a more specialized effect for non-miniature images. You can rotate the angle to make certain areas appear blurred or in focus.

Photoshop CS6′s Content Aware Move Magic!

Content Aware Move

New to the Content Aware family is Content Aware Move. We now have the following:

  • Content Aware Scale
  • Content Aware Fill
  • Content Aware Move

Content Aware move can be used two ways:

  1. To actually move someone or something to another part of an image.
  2. To extend part of an image.

To extend part of an image, as in this image below with the wood, first enlarge your canvas size by choosing Image > Canvas Size. Now make a selection of the top area you want to extend. With the Content Aware Move tool set to “Extend” from the Control bar, drag it upwards. With Extend selected, drag the pixels to the new location, and Photoshop magically aligns the image.


If you want to actually move one of the nails, simply select the nail and a bit of room around it, and change the mode to Move. Photoshp will fill in the area where the nail once was with the appropriate background.

Cropping Changes in Adobe Photoshop CS6

Cropping Changes

Photoshop CS6 now has a completely nondestructive Crop tool. When you choose the Crop tool, you will notice the new crop marquee, with eight handles instead of four. The benefit of these new handles is that we can now resize non-proportionally. The most important thing about cropping is to de-check Delete Cropped Pixels. This enables you to choose Image > Reveal All later on to undo the crop.

You can choose Rule of Thirds overlay, CS6 lets you preview Golden Ratio (a relationship between two numbers), Diagonal, Triangle, and Golden Spiral overlays. Perspective Crop helps you straighten images.
Straighten (which was part of the Ruler tool in CS5) is now a feature of the Crop tool. Click on the Straighten icon on the Control bar while on the Crop tool, and drag along the line of the image that needs to be straightened. The Crop tool automatically rotates the image and applies the crop.
You will notice that when you drag the Crop tool, the image shifts in the opposite direction. If you would like to disable this, from the Crop Preferences on the Control bar, de-check Auto Center Preview. You can even take it back to Classic mode if you don’t like the way the Crop tool has changed.  From the Crop Preferences, you can also change the color of the area that is being cropped away.

Perspective Crop Tool

The Perspective Crop tool enables you to align objects as you crop with a flexible marquee. This was available in CS5, but not very intuituve as it being its’ own tool as it is now.
The best way to begin is to align the Perspective Crop marquee up with something that it’s very clear where the edges are. Like the Distort tool, you can drag each corner independently to make a skewed image appear straight-on or flat.

Photoshop CS6 Layer Changes

Searching and Modifying Layers

One fabulous new feature is the ability to search layers. You can search by Kind, Name, Effect, Mode, Attribute or Color within the Layers panel. You can filter out all vector layers, text layers, and so on. You can also select multiple layers and change the blend modes, duplicate, or apply Layer Styles.

No one is sure as to the rhyme or reason, but they have moved everything around in the Layer Styles window. Maybe by moving Drop Shadow to the bottom it won’t be so overused?

Real Vector Layers and Pixel Snapping

You can now add and edit dashed or dotted lines, like in Illustrator. Pixel Snapping has also been modified from strictly used by vector tools to a more global use within Photoshop. Prior to CS6, nudging was married to how far you were zoomed in. For example, if you are at a 100% magnification and nudged a point, it moved 1 pixel. If you were zoomed at 200%, nudging moved it .5 pixels, 400% Would nudge .25 pixels and so on. Photoshop CS6 nudges at 1 pixel, regardless of the zoom level.
You can still use the Shape tool to create a variety of set or custom shapes. You can also click once with any Shape tool and  get the Create Custom Shape window as in Illustrator or InDesign. When you select the Shape tool, you choose from the upper right hand corner of the Control Bar either Shape, Path, or Pixels.

We now also can have dotted lines on vector shapes! The first choice is Fill and Stroke. You are able to choose a Fill of None, and simply have an outlined shape. From there, you can coose a weight, style, width and height.

The next 3 buttons are Pathfinder, Alignment and Stacking order . Alignment allows you to align to both a selection and canvas. Align Edges works uses the Pixel Grid to ensure layer edges are aligned with the Pixel Grid.

Photoshop CS6 General Changes

General Changes

Adobe has also redesigned and streamlined the program’s menu icons, though they’re still familiar and easily recognizable. 1800 Icons and 250 cursors have been redesigned. Panels are now labeled in upper- and lowercase type instead of in all caps, enhancing legibility. You can also go to Preferences and choose to keep the new, dark interface, or go lighter. In addition, the new Mercury Graphics Engine makes Photoshop CS6 run noticeably faster.

CS6 offers “rich cursors” revealing information such as dimensions, angle of rotation or other adjustment parameters next to the cursor.
The Move tool, Crop tool, and the Free Transform command show size and rotation angle. If you’re using Free Transform, Photoshop shows the exact dimensions that used to be only available on the Info panel.

When you hold down the Controll + Option key (Mac) and drag the brush tool, you see the dimensions, hardness, and opacity.
One of the most exciting features is that Photoshop CS6 can automatically save your open files at different intervals, AND in the background. While you continue to work, a temporary recovery file is saved that is updated periodically. The benefit is that if you crash, it will open a file with “Recovered” as part of the name.

Mini-Bridge Relocated

Mini Bridge is now at the bottom of the window with Timeline. Interestingly enough, if you choose Select a Workspace from the upper right hand corner of the Control Bar and set it to “What’s new in CS6” it reverts back to it’s previous location. You can also drag it from the bottom of the workspace and put it anyhwere you like.