'Net Features : photoshop

Experts Speak: Everyday Design Tools

Amberly Dressler — Thu, 04 Apr 2013 20:02:00 GMT

Occasionally, a design tool comes along that establishes its place as an essential, can't work without it solution for Web designers and developers.

The available design tool options are nearly limitless, but here are what the experts have open on their computer every day:

Michael Cornett, Owner of Shine Online Marketing

Photoshop CS6 - Designing the layout of a website first in Photoshop, then coding that PSD file into a WordPress theme or other template. This really let's you get creative and visualize your site before ever getting to the coding itself.

Illustrator CS6 - Working with vector images and creating graphics for sites.

Sublime Text - A text editor for the nitty-gritty of coding sites.

Filezilla - FTP program for uploading and downloading files for new and existing sites.

Firebug - A Firefox extension that allows you to inspect on-page elements of your site quickly, in order to make the necessary changes.

Roboform - When you are working with multiple sites, online programs, etc., Roboform makes remembering logins and passwords simple (by doing it for you with a simple click).

Catie Hayes, Director of Web Services at Advanced Digital Websites

PagePart - With the emergence of mobile, we are trying to shift clients to mobile websites. It is very tricky though. They have limited budgets and big ideas. We came across PagePart, a mobile website platform that helps build a mobile websites affordably while providing design flexibility within a range that keeps you ultimately within design limitations that provide the best possible user experience.

This website solution is unique because the company also provides all the sales and marketing tools to help me sell my services. From an URL, I can create a working mobile website within about 10 minutes using templates and pre-selected colors. I can then customize to my client needs. All this happens quick and easily. We serve more clients at higher margins. You can't beat that.

Jorge Aguayo, SEO Specialist at InTechCenter

Inkscape and the GIMP - For me, the main tools are Inkscape and the GIMP. The GIMP is great to tweak the look and optimize the images. The curves tool, specifically, lets me enhance the contrast to my linking. Besides these two, I am fond of using Yahoo's Smush It tool to optimize the image files even more for the Web, as it lightens up the image files without affecting their quality.

Mario Mirabella , Founder and Creative Director of MSM DesignZ, Inc.

Dreamweaver - Dreamweaver is an extremely powerful text editor and streamlines all of my files into one connected entity, which helps put organization and consistency in the forefront without extra effort on my part. From CSS and HTML to PHP and Javascript, Dreamweaver's tools make developing websites simpler and more efficient.

Photoshop - Photoshop is my other go-to when designing a website or creating images for backgrounds/content/slideshows/etc. It's extremely powerful, the tools are intuitive and precise. It's ability to save for Web takes the hassle out maintaining quality of the clear and vibrant images I work so hard to create.

Zurb Foundation - I also use Zurb Foundation, a framework that makes creating responsive websites as simple as possible. With its pre-coded column grid, its excellent cross browser capabilities, and its beautiful jquery plugins, my speed of production has increased dramatically. It's an extremely important part of my process.

Prasant Varghese, Usability Analyst (Web Design) at Icreon Tech

960 Grid - To aid us in creating the most usable websites possible - we use CSS frameworks like 960 Grid that allow us to create website blueprints to help aid site visitors in naturally navigating through a website organically and without much friction.

The Web today is all about usability. Today - there is no such thing as a unique website - and so, websites with similar functionality are usually only distinguished by how usable they are.

Garrett Scafani, Creative Director at Yeti

Standard Issue - Personally I think my toolset is pretty standard issue: A laptop, adobe creative suite, a code editor, a camera and a sketchbook. When trying to improve the visual design of the project I try to get out of the routine and absorb as much inspiration from things outside of the Web realm as possible while still keeping up to speed with the current trends and standards. There are a lot of really clean and slick web pages out in the wild right now, but so many of them look exactly the same. It seems while designers are embracing new standards and tools (e.g the mobile-first approach and frameworks such as Twitter Bootstrap and Zurb Foundation) they succeeded in creating an experience that can adapt to any device but have in turn sacrificed making something the is different from every other responsive website.

To combat this I try to glean styles and visual motifs from everything I'm exposed to, whether it's an old book, a movie or video game, architecture, nature - anything. Mobile technology makes it really easy to capture these moments and take notes, just adding a phone and a bicycle to my toolset gets me away from the desk and helps me think about the project in a new and creative way.

Deanne Hollis, CEO of Main Street Public Relations

Photoshop, PowerPoint and Stock Images - As a Website developer, time spent on graphic design is critical because it can become very time consuming lowering the profit potential of the business. I develop a vision for a site then find the fastest most efficient way to bring it to life visually. The top tools I most frequently use are Photoshop, MS PowerPoint and a stock-image supply site.

Photoshop makes it easy to size and crop images then add text (example logo header: www.theinnerniche.com). PowerPoint enables a quick and easy screenshot capture then crop and save for posts, where maximum image clarity isn't an issue. The stock-image supply sites are a very inexpensive way to get great images and ensure your client is protected from copyright issues. The logo-header of the sample site previously referenced was created using a stock image, stock vector image and Photoshop.

Ryan Morgan, Online Marketing Manager at ERC

Zurb - For starting from scratch, I always use paper and pencil along with Zurb sketch sheets, which are great for mapping out designs, especially responsive designs.

Sublime Text 2, Crunch SimpLESS - For coding, I've been using Sublime Text 2, which in my opinion is the best text editor out there. I also use Crunch and SimpLESS for LESS CSS coding.

Toggl - If I'm doing freelance work, Toggl is a really great free time tracking application.

Bootstrap and Base - All of my designs are responsive these days, and two great frameworks to start with are Bootstrap from Twitter or Base for a lightweight framework.

Adobe Photoshop Touch Apps for iPad

Pete Prestipino — Wed, 11 May 2011 16:10:00 GMT

Several Adobe Photoshop Touch apps were released today including Adobe Color Lava, Adobe Eazel and Adobe Nav for Apple iPad. The apps were developed using the Photoshop Touch Software Development Kit (SDK) and demonstrate the potential for new interaction between Photoshop and tablet devices.

Using the suite of Photoshop Touch apps, Adobe is enabling users to create custom color swatches, paint directly onscreen and use popular Photoshop tools from their tablet devices.

Adobe Color Lava for example allows designers to use their fingertips to mix colors on the iPad, creating custom color swatches and themes which can then be transfered back into Photoshop. Adobe Nav is another app - and an extremely useful one - that will enable designers to extend and improve the creative process while increasing efficiency. The apps lets users select and control Photoshop tools like customizing the toolbar, browsing and zooming in on open files and creating new files.

The Photoshop Touch SDK enables developers to build tablet applications that interact with Photoshop from Android, BlackBerry PlayBook and iOS devices. Utilizing the SDK, developers will have wide access to Photoshop functionality with the freedom to innovate and create new apps or add capabilities to existing ones.

“Tablet devices are destined to become part of creative workflows and these companion Photoshop applications are just the first indications of the creativity we can expect from Adobe and our developer community,” said John Loiacono, senior vice president and general manager at Adobe in the Digital Media Solutions group. “ With our Touch SDK, we are going to see some astonishing new ways to keep Photoshop at the heart of the creative process no matter what the device – desktop computer, Android tablet, BlackBerry PlayBook or iOS device.”

Snapshot of Color Lava:

Photoshop on the iPhone... (Sigh)

Pete Prestipino — Mon, 12 Oct 2009 20:01:00 GMT

As a diehard Google Android user nothing upsets me more than today's announcement from Adobe that the Photoshop.com Mobile iPhone application is now available. Sigh. For free (sigh).

Users will be able to edit photos, apply effects and share images, plus users can connect their Photoshop.com accounts to enable photo sharing and data back-up.

“As the digital imaging leader, Adobe is excited to bring Photoshop.com Mobile to iPhone users,” said Doug Mack, vice president and general manager of Consumer and Hosted Solutions at Adobe. “Now, with access to powerful editing and sharing tools, iPhone users are armed with the resources to document all of life’s unexpected moments, make them look their best and then re-live those memories with friends and family.”

Stay up to date on the latest Internet trends:
Request a professional subscription to Website Magazine,
the most popular print publication on Web success.

Distortion Plugin From FilterForge

Pete Prestipino — Tue, 24 Feb 2009 20:22:00 GMT

Filter Forge, a company known for its product that enables designers to use an innovative Photoshop plugin to create their own filters (visual effects, distortions, patterns, backgrounds, frames), released a free distortion plugin today.

Filter Forge Freepack 4 contains 7 free filters that can distort, jumble and reshape images in various ways. For example, the 'Shatter' filter breaks the source image into sharp-edged fragments, 'Wave Distortion' distorts the image based on sinusoidal or triangular wave functions, and 'Pattern Glass' produces an effect of looking at the image through a piece of patterned glass.

All Filter Forge freepacks are available for download at the company website (no registration required).

...............
Upgrade to a professional-level membership from Website Magazine

Find Quality Photoshop Brushes

Pete Prestipino — Fri, 02 Jan 2009 15:48:00 GMT

In the toolbox of every professional Web designer you'll find high quality Photoshop brushes - and in some instances, you'll often find hundreds. I've taken the liberty of identifying some free resources I have been using lately to download brushes (although I would most certainly not consider myself a professional designer). What I've found over the past few weeks is that trying to put together a personal list of "favorite" brushes is sort of an arbitrary process, and each design scenario requires a different perspective and in turn a different design brush. That being said, many of the sites listed below act as excellent gateways to the best Photoshop brushes.

Brusheezy is a site for artists to download (and even vote on) custom Photoship brushes and patterns. Sister sites of Brusheezy include vecteezy (free vector art) and flasheezy (free flash files), which are both worth a look.

Some sample brushes from Brusheezy.com:

GetBrushes is another resource for finding quality Photoship brushes. The site is well organized and many of the featured brushes are free for non-commercial work.

Some sample brushes from GetBrushes.com:

BrushDownload is the final brush download site featured today. Not well organized, but there are actually quite a few gems to be found here and the number of downloads for many of these Photoshop brushes clearly indicates that.

Some sample brushes from BrushDownload.com:

Round Corners in Photoshop

Pete Prestipino — Wed, 03 Sep 2008 14:51:00 GMT

Using round corners on images seems to be the norm these days for designers. The sleek appearance is a sought after effect by novices and experts alike, so let's look at how to create rounded corners in Photoshop.

If you don't have Photoshop, you're not out of luck - try RoundMyCorners.com or RoundPic.com - both are excellent web-based services to add curved-corners to images and get rid of those boxy-looking corners once and for all.

(continues below...)

Stay up to date on the latest Internet trends:
Request a professional subscription to Website Magazine,
the most popular print publication on Web success.

Creating Rounded Edge Corners for Rectangles and Squares in Photoshop
I'm working in an older version of Photoshop but it's the process that is important here. The first thing we'll need is an image.

Open the image to be modified and the layer palette (if it's not already open). Create an additional layer with no background.

Using the rounded rectangle tool, we need to draw a rectangle on this layer.

The color of this rectangle is not important. What is essential to remember however is that whatever is under this layer will be in the image, so if you've got text or an important part of the image, make sure it will be seen.

Double Click on the layer you just created. This will open up the Layer Style dialog box. In the advanced blending area, set the "fill opacity to 0%.

Return to the layers palette, and select the Paths tab - see image below. Choose the "Make Selection" option. Make sure the feature radius is at 0 pixels and anti-aliased is checked. Select OK and you are moment away from rounded corners for your image.

With the selection still pending action, go to Edit, and select Copy Merged. Create a new document (don't change the dimensions) and paste it in - you've got rounded corners for an image. Well done!

Photoshop Webpage Creation With SiteGrinder

Pete Prestipino — Tue, 15 Jul 2008 13:57:00 GMT

SiteGrinder2, an Adobe Photoshop plugin used to generate photoshop designs into CSS-rich, standards compliant webpages inside Photoshope has released several important updates.

New features such as complete compatibility with Apple's latest operating system, Mac OS X 10.5 Leopard; Macintosh Universal compatibility (PowerPC and Intel processors); full Microsoft Vista compatibility; dramatically improved support for JPEG metadata; much more powerful and robust pop-up menus; and enhanced support for non-English language character sets.

The tool is very powerful, allowing designers to create automated photo galleries, Flash slideshows, CSS-driven menus, and a lot more while keeping the exact look and layout of the parent Photoshop file from which they were created. Priced at US$349.00 for SiteGrinder 2 Pro and US$129.00 for SiteGrinder 2 Basic, both are available directly from the Media Lab website at medialab.com.