The Site Slinger is the Best PSD to HTML, PSD to Responsive, and WordPress Coding Conversion
Test promo code
For October 2013 only, enjoy 10% off your PSD to HTML project of 3 pages or more! We offer personal service, fast delivery, and expert code.
Submit your Photoshop designs for a FREE Quote today. Just mention promo code: SLINGERFALL13 on the order form to receive your discount.
Wireframing is often the first step in any web design process, where elusive ideas take starting taking a concrete shape. Long before the Photoshop mockups and the actual website, the designer will sit down with her favorite wireframing tool and sketch out different layouts and design ideas. Wireframing can also be a wonderful source of inspiration. Most professional designers swear by wireframing, which means this is one skill you wouldn’t want to go without. Read on for all things wireframe, plus tools and other design resources.
Wireframing is often the first step in any web design process, where elusive ideas take starting taking a concrete shape. Think of a wireframe as a very rough first draft of a novel, or a hastily drawn outline of a new sketch. Long before the Photoshop mockups and the actual website, the designer will sit down with her favorite wireframing tools and sketch out different layouts and design ideas. These will then serve as a ‘map’ guiding the designer throughout the website creation process.
Wireframing can also be a wonderful source of inspiration. Learning from wireframes made by others can help improve your design skills while also giving you new ideas on layouts, UI and UX. Most professional designers swear by wireframing, which means this is one skill you wouldn’t want to go without.
Imagine you have to make a skyscraper. You have all the raw materials you’ll ever need and a construction crew that will work non-stop, without pay. You start off with a lot of enthusiasm but quickly learn that building a skyscraper is a lot more difficult than it sounds. You place blocks in the wrong place, struggle with interior design and misplace the elevator shaft. As you sit on the crumbling rubble of your failed skyscraper, you wonder, “if only I had a blueprint to guide me”.
This is exactly what wireframing is: it is a blueprint that helps you build your own skyscraper website. Just like you need a blueprint to construct any building more complex than four walls and a roof, you also need a wireframe to build larger, more complicated websites.
Website wireframes don’t include any real copy or graphical elements – just like a blueprint. Instead, wireframes are usually made up of placeholder elements that describe the basic structure and layout of a website.
Wireframing is like sketching; there is no prescribed method for doing it. Some like to create freehand drawings, some like to use professional wireframing software, while some others are happy to cobble things together in Photoshop. Some of the most popular methods of creating wireframes are:
For professional web designers, creating wireframes is usually a four step process:
The process is slightly different for creating web apps, as there is much heavier focus on UX and UI. Refer to our previous post on launching a web app for more information.
Once the wireframing process is complete, you can start creating the first mockup in Photoshop. After the client’s approval, you can turn the mockup into an actual, live website using HTML and CSS. Some wireframing tools also have the capability to create dynamic, interactive HTML webpages from simple wireframes.
With wireframing, as with much of web design, you must stand on the shoulders of giants to create something new and extraordinary. Gathering wireframing ideas from top web designers is an essential part of the learning process and can help you to:
“But”, you ask, “how do I find and learn from other designers?”
The answer, as we’ll learn below, is rather simple:
These tips apply to not just websites, but web/mobile apps and email newsletters as well. In fact, designing email newsletters poses an altogether new design challenge, as our previous post on 10 tips for designing HTML emails notes.
Designers are spoiled for choice when it comes to picking wireframing tools. There are dozens of tools in the market, some online, some desktop-based, some free, and some paid. We’ll take a look at some of the most popular tools below:
1. Balsamiq Mockups: Long held as the gold-standard in wireframing, Balsamiq is immensely popular with web designers and comes in both desktop and web-based avatars. Although it is packed with features, including many plugins, it does cost a pretty penny – $79 for the desktop version, and web-based plans starting at $12/month.
2. Pidoco: Pidoco is a web-based wireframing tool that’s quickly rising up the popularity charts. It boasts an extensive library of drag-and-drop web elements. Finished wireframes can be easily shared with clients, who can also leave notes and comments on the designs. Prices start at $9/month for a basic package.
3. Visio: Visio, a part of the Microsoft Office family, is more than just a wireframing tool – it is a complete diagramming software that allows anyone to create powerful, data-linked diagrams and flowcharts. Of course, it can be used for wireframing as well, though the interface does get a bit clunky, especially for large, more complicated websites. Prices start at $599, making it a poor choice for most web designers.
4. Axure: More than a simple wireframing tool, Axure is a powerful mockup software that helps you turn your wireframes into interactive, HTML websites. It is available for both Mac and Windows with prices starting at $289.
5. Adobe InDesign: InDesign, as you might be familiar, is Adobe’s flagship desktop publishing software. While the software is primarily used for creating magazine/book layouts, it can also be used for creating wireframes. But with limited functionality, you’re better off using a dedicated wireframing tool, especially considering the price.
6. iPlotz: iPlotz is a simple, web-based mockup tool with drag-and-drop functionality. Although somewhat limited in features, it’s a great tool for creating wireframes on the fly. You can also leave notes and discuss design elements with other team members. iPlotz offers a free version, though you might want to at least get the single-user license ($15/month).
7. PencilProject: For a free, open-source alternative, look no further than PencilProject. Available for both Mac and Windows, PeincilProject is feature rich, powerful, and most importantly, completely free!
8. OmniGraffle: OmniGraffle started out as a Mac favorite before making the transition to the iPad. It’s a great looking, feature-rich wireframing tool priced at $49.99 that’ll help you create website prototypes, conversion flow charts, sign-up process charts, etc. The only downside is that it’s not available for Windows.
9. MockFlow: MockFlow is a web-based wireframing tool you can try for free online. Besides the familiar drag-and-drop model, it also supports extensive collaborating capabilities, making it a great choice for larger teams.
10. Adobe Photoshop: Last, but not the least, is Adobe Photoshop. Every designer worth his salt is already familiar with the software. Which is why it works quite well as a wireframing tool (although larger websites can get a bit cumbersome). On the price side, however, Photoshop doesn’t exactly come cheap.
Want some inspiration and help in creating wireframes? Check out our list of helpful websites and resources below:
Phew! That’s it for our guide to wireframing. Check this space for more tutorials, tips and advice on web design, development and wireframing in the future!
Photo credit (top): Mike Rohde / Foter / CC BY-NC-ND
The long awaited update to the premier responsive framework has arrived! On August 19th, the folks behind Twitter Bootstrap took the latest version out of beta and announced the release of Bootstrap 3, coinciding with the two-year anniversary of the original release. Here’s a few things about the release worth calling out.
The long awaited update to the premier responsive framework has arrived! On August 19th, the folks behind Twitter Bootstrap took the latest version out of beta and announced the release of Bootstrap 3, coinciding with the two-year anniversary of the original release.
Here at The Site Slinger, we’ve received many inquiries about Bootstrap 3 and have been waiting to get our hands on the latest, stable version. We’re excited to code up more responsive websites using the new Bootstrap, with all of its great improvements! Submit your PSD to Bootstrap 3 project today!
- Mobile first and always responsive! Nearly everything has been redesigned and rebuilt to start from your handheld devices and scale up. With Bootstrap 3 we’ve gone deep on responsive and mobile first—it’s built in and no longer requires a separate stylesheet. That’s great for most folks, but not everyone needs or wants an adaptive web site or application. To help, we’ve added some documentation and an example that disables the adaptive or responsive features with some extra CSS. Check out the Disabling responsiveness section or head right to the non-responsive example to learn more.
- Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.
- Super-powered grid system. With four tiers of grid classes—phones, tablets, desktops, and large desktops—you can do some super crazy awesome layouts.
- New Glyphicons icon font! While they were gone for a while, we’ve since restored the Glyphicons to the main repo. In 2.x, they were images, but now they’re in font format and include 40 new glyphs.
- Overhauled navbar. It’s now always responsive and comes with some super handy and re-arrangable subcomponents.
- Modals are way more responsive. We’ve overhauled the modal code to make it way more responsive on mobile devices
- Dropped Internet Explorer 7 and Firefox 3.6 support. For Internet Explorer 8, you’ll need to include Respond.js for all the media queries to work correctly. You can read more about browser support in the docs.
Source: Official Bootstrap Blog
You can read the official Bootstrap blog post about the release, complete with a celebratory Montell Jordan – “This is How We Do It” music video — AWESOME!
Twitter Bootstrap was created by a couple of guys at Twitter to maintain consistency across many internal tools. In public form, it’s a free, yet powerful framework for front-end development of websites and web applications. It uses HTML and CSS-based layout templates for typography, and interface components like forms, buttons and navigation elements. The key is that it’s a highly flexible framework built for the new era of responsive web design. Learn more about our PSD to Bootstrap conversion process here.
Have questions or a design ready for us to review? Submit your Bootstrap 3 projects today!
Join The Site Slinger Affiliate program today! We’re looking for the best affiliates to work with, ask about the program today.
We crush other affiliate programs with our minimum payouts! The Site Slinger is the only PSD to HTML company that makes building custom websites easy. Send us your Photoshop designs and we return HTML code in 5 business days or less. You can use this code to create custom websites, WordPress themes, web apps, enterprise software or whatever else you can think of.
We use the most feature-rich affiliate management network available, ShareaSale! When you join our program and login, you’ll be presented with an easy-to-use interface to view your reports, and choose your links and banners.
ShareaSale also gives us the ability to easily improve the affiliate program for you as standards change, so if something isn’t working we can fix it. Their support for affiliate payments and advanced features means we can focus on making our offer convert better for you!
Our creative has been tested, retested, tested again! We continually design and test our display ads against each other to see what performs the best so you don’t have to. Of course, you can use your own banners too if you’d like!
Have questions or feedback?
We love working with designers, and we know that you never can have enough free web design resources. Today we’re sharing a list of 35 of the best resources on the web for design freebies. Whether you’re looking for “plug and play” visual content, a beautiful new font, or some design inspiration, you’re bound to find a new favorite web design resource on our list.
Here at The Site Slinger, we help talented web designers like you turn your gorgeous concepts and layouts into fully functional websites. This gives you more time to do the work you’re best at – web design, of course! – by handling the coding for you.
We love working with web designers, and we know that you can never have enough free web design resources. Today we’re sharing a list of 35 of the best resources on the web for design freebies. Whether you’re looking for “plug and play” visual content, a beautiful new font, or some design inspiration, you’re bound to find new favorite free web design resources on our list.
Let’s face it – even the most talented among us get creatively stuck from time to time. So when it comes to sources of quick visual stimulation and idea generation, the more you know about, the better. Here are seven of our favorites.
Choosing quality stock photos can make your designs come alive – but you already knew that, didn’t you? Make sure you get to know these six places to find great free images.
BONUS! Wikimedia Commons is a resource I came across recently (so I’ve updated this list!). An easily searchable database with familiar Wikipedia-esque format, you’ll find this site to be valuable, with its use of categories and filters for free images.
BONUS #2! Getty Images (yes, Getty) recently opened up the majority of their collection in exchange for an open-embed program that lets users drop in any image, and they get to append a byline at the bottom of the picture with a credit and link to the licensing page. A great, and somewhat surprising, alternative to the usual free stock house options!
Sometimes you just don’t have time to create every visual element from scratch – and really, you shouldn’t have to. These five sources for non-photo design assets will help you when you’re short on time.
They say “design is 95% typography!” Fonts can completely change the overall impression of your website. They can also be really expensive! That makes free fonts practically invaluable as design assets. Here are four places where you can stock up.
No matter how top-notch your design skills are, there’s always more to learn. Here are three of the best free tutorial resources to learn web design, particularly through videos.
Social networks are a fantastic place for web designers to meet new colleagues and potential clients, share work and get feedback, and learn about the latest design trends. Some social media platforms, however, can be a waste of time for designers. These four social networks will bring you the best return on your time investment.
We know you spend the majority of your time doing actual design work, but it’s also important to stay on top of the latest news in the design industry. You can’t beat blogs for the latest in free design news, information, and links to other excellent resources. Here are six to check out.
And last but most definitely not least, we share freebies, tutorials, and advice here on The Site Slinger blog and on our Facebook, Twitter, and Google+ profiles. Come join us – we’d love to talk web design and development with you.
Your Turn!
What do you think of our list? What did we miss? Contact us to let us know, or ask us about how we can help you turn your designs into code.
Additional Freebies
Check out these other lists of free web design resources we’ve shared on our blog!
As the top service for PSD to HTML on the Web, we throw around the term ‘PSD’ quite a bit. We’ve answered the question ‘What is PSD to HTML?‘ and provided a list of definitions of common web development terms, but now we break it down even further.
As the top service for PSD to HTML on the Web, we throw around the term ‘PSD’ quite a bit. We’ve answered the question ‘What is PSD to HTML?‘ and provided a list of definitions of common web development terms, but now we break it down even further.
Simply put, a PSD is a Photoshop design file. Technically, it stands for Photoshop Document, which is a proprietary file type from Adobe. Adobe’s Photoshop is the software most widely used for web design and works best for the design-to-code process.
PSD files are typically opened and edited with Adobe Photoshop, but can be opened with Adobe Photoshop Elements, and even certain non-Adobe products such as Corel’s PaintShop Pro and GIMP. However, programs other than Photoshop will not be able to fully edit or even read the complex layers utilized in many PSD files. Other advanced features within a PSD design may not be properly recognized, either. We highly recommend working with Photoshop from the beginning to ensure it will be universally accessible by designers and developers who may be involved with your project.
If you’re interested in a free program to simply view PSD files as flat images (no layers), Apple’s QuickTime, which includes Picture Viewer, will do the trick, but you can’t use the program to edit a PSD file. It is purely for viewing PSD files as images.
PSD files can be “sliced” and turned into HTML code by a proficient web developer. PSD to HTML services, such as The Site Slinger, specialize in just this. We take the PSD files and hand back HTML/CSS markup that’s ready for implementation as a live site.
Sometimes other file types are used by designers. While we may be able to work with PNG, IDD, or AI file types, we highly recommend PSD files. Working form other file types can require the added step of converting designs to a PSD file.
A “good” PSD is layered, and well organized using folders and layer comps to show different pages and states. Be sure to design all animation states, and button states (click, hover, off). Read more of our web design tips and check out the other resources below. In the end, we take your design and turn it into code, producing a website that matches your design pixel-perfect.
The PSD file type supports all image modes (Bitmap, Grayscale, Duotone, Indexed Color, RGB, CMYK, Lab, and Multichannel), which is part of the reason it is so widely used. It also supports clipping paths, channels, transparency information, and multi-level layers while other formats merely present ‘flat’ images.
The PSD file type preserves a design as layered images which is extremely useful for future editing (and re-editing) of different parts of a design. Each layer can be worked on individually, without affecting the rest of the elements in a design. You can also use a feature called ‘layer comps‘ to present variations of the same design. Photoshop can convert PSD files to other formats, such as PNG, JPG etc… so you can export a design for a wide variety of uses, like web graphics.
It’s also interesting to note that Photoshop files sometimes have the extension .PSB, which stands for “Photoshop Big”. According to Adobe, “The Large Document Format (PSB) supports documents up to 300,000 pixels in any dimension. All Photoshop features, such as layers, effects, and filters, are supported. You can save high dynamic range, 32‑bits-per-channel images as PSB files. Currently, if you save a document in PSB format, it can be opened only in Photoshop CS or later.”
You can read tons more about Adobe Photoshop File Formats Specification, if you want to delve further into the technical aspects of the PSD file type.
And here are some helpful tips and tricks on how to slice a PSD file efficiently if you want to try your hand.
Sketch is a vector-based design tool that is gaining popularity among web designers. It is available only on macOS and is designed specifically for web and app design. Sketch offers a range of features that make it easier to make responsive designs and then convert those into pixel-perfect HTML markups.
Pros:
Cons:
Adobe XD is a vector-based design tool that is available for both macOS and Windows. It is designed specifically for web and app design and allows designers to create wireframes, prototypes, and finished designs all in the same tool.
Pros:
Cons:
Figma is a web-based design tool that allows designers to create, share, and collaborate on designs in real-time. It is specifically designed for web and app design and offers a range of features that make it easier to design for responsive web design and UI design.
Pros:
Cons:
Searching for a super fast PSD to HTML conversion service? You are in the right place. The Site Slinger experts will turn your design into a stunning, responsive, pixel-perfect HTML template in just a few hours.
Get in touch with us, tell us about your project, and get delivered a perfectly coded template whenever you need it.
Read further for tips and how-to’s for web design.
Building your own web application is a complicated, challenging and exciting process. It requires mastering a number of skills, from design to development. Fortunately, with the tools available today, starting a website is both easy and fun. Let’s take a look at how to launch a web app.
If you work on the web, you know that the launch of a new web application is a complicated, challenging and exciting process. Every day we see new projects come to life during the first steps in the development process, when you turn your photoshop comps into live HTML code. Getting the application into a workable (and marketable) product from there requires mastering a number of skills.
Let’s take a look at how to launch a web app, website or what-ever-you-are-building.
The days of blinking scrolls and clumsy tiled backgrounds are (thankfully) well past us. Spoiled by design-centric startups like Airbnb and Fab.com, users have come not just to expect, but demand good design. Design is also one of the quickest ways to set yourself apart from your competitors. It is, after all, the first thing users see on your site.
Thankfully, good design isn’t terribly expensive. You can even create simple webpage mockups by yourself if you follow some basic design principles, such as:
1. Sketching: Before you create a single pixel in Photoshop, spend some time sketching the basic vision of your web app on paper. This doesn’t have to be terribly complicated; you can draw out anything you want as long as it has some design coherence. This sketch should serve as a very rough map of what your final design might look like. Don’t be afraid to create several sketches until you reach a more concrete vision.
2. Wireframing: A wireframe represents an ‘X-Ray’ of your website. This is a rough schematic diagram showing the various components on any page. This wireframe can be as simple as a sheet of paper with different boxes denoting Header, Navigation Menu, Content and Footer. Ideally, wireframing and sketching should be done together. You can do this by hand, or use a tool like Photoshop.
3. Creating a Mockup: The third step is to create a mockup of your final design using the sketches and wireframing as a guide. Mockups can be created in Photoshop, or you can use design tools like Mockingbird or Balsamiq to create designs quickly. The mockup will reflect your final design, so take some time to flesh it out completely before moving on to the next step. There are a few things to keep in mind when creating a mockup:
Now that you’re on your way to finishing your web design, let’s look at another crucial usability component: UX.
User Experience or UX refers to how people interact with your web app. This is a very broad field that covers everything from usability to conversion rates. As you can imagine, UX requires years of expertise and experience to master. You can hire a UX consultant like Theresa Neil, or tinker around on your own by following some basic UX principles:
1. K.I.S.S.: When it comes to UX, you can’t go too wrong following Apple’s UX dictum – Keep it Simple Stupid! Don’t use two elements where one can suffice, limit the number of choices for the customer, and ensure that your app can be used by even the most tech illiterate of users.
2. Big Words ≠ Big Returns: It’s common for new startups to wax poetic about the features and benefits of their web app, all at the expense of the customer. Keep the text on your web site as limited as possible (except on the blog, about-us page, etc.). Wherever possible, communicate through pictures and videos instead of text.
3. Focus on Numbers: The great thing about UX is that you get access to a ton of data to base your decisions on. Analytics tools like Google Analytics and KISSMetrics can help you track how little changes affect the overall user experience. A startup that focuses on performance metrics will almost always outperform one that adopts a ‘see what sticks’ approach.
4. Get Feedback: Getting subjective feedback on your web app is as important as focusing on performance data. Websites like UserTesting.com can give you a great overview of how visitors use your sites and what you can do to improve the overall user experience.
5. UX is an Ongoing Process: There is never a time when you can’t focus on UX. UX is a constant, endless process. You should constantly try to improve the user experience, no matter how great your conversion rates are, or how happy the users may seem.
Testing is the process of measuring the effectiveness of your web app. This is where the rubber meets the road. It’s a hard, gritty process that most startups fail to master. Essentially, it involves creating multiple variations of the same page and measuring their performance against each other. This is a purely statistical exercise and can be done by anyone by following a few simple tips:
1. A/B Testing: A/B testing, also called ‘split testing’, is used to measure the performance of two variants (labeled A and B) of the same page. Different versions of a page are shown to different users randomly. You can then calculate how each page performed viz-a-viz the other, and select the right page accordingly.
2. Small Changes Can Equal Big Rewards: You don’t always have to make sweeping changes to see dramatic improvements in conversion rates. Sometimes, the simplest of changes such as using different colored buttons and links can equal big rewards. Try out these simple changes before overhauling the existing design completely, and be open to learning from the mistakes of others.
Have you ever tried to use one of your favorite websites on a smartphone or tablet and found the experience completely disappointing? In this ‘Age of Many Screens’, it is important to optimize not just for desktops and laptops, but also smartphones and tablets. Basically, everyone, regardless of screen size or device type, should be able to access your web app.
One way to go about this is by using ‘Responsive Design’. A web app with responsive design automatically changes to fit different screen types. It can expand to fill all the space on a 27” monitor, and squeeze down to fit on a 4” smartphone screen without any loss in usability. The Site Slinger specializes in creating responsive designs that look great on any screen.
While you’re creating responsive designs for your web app, also make sure that you create corresponding designs for your email marketing campaigns. The Site Slinger can code responsive email templates, as well.
Development is where all the planning and design finally pays off and your vision comes to life. It is often the hardest step in the entire app creation process, depending on who you ask. If you have prior coding experience, development can be a relatively straightforward experience, especially for simple web apps. Otherwise, you should be prepared to pay through your nose for a top notch custom developer to take your design live.
Hiring developers is an expensive process wrought with trial and error. Quality freelancers are not only expensive, but also extremely hard to find. You should expect to go through a number of developers before you find someone who fits your requirements.
An easier (and cheaper) alternative is to hire a PSD to HTML service like The Site Slinger. The Site Slinger specializes in turning PSD design files into actual live sites. We have years of experience working with startups and takes care of all the frontend development work so you can focus on what’s really important – sales, traffic and customers.
The Site Slinger converts designs into code for companies, including startups like WPEngine, Capital Factory, OwnLocal, and more. Our PSD to HTML team hand-codes a full Photoshop design into HTML5, CSS3 and all basic JavaScript animations, which is perfect for an app prototype or marketing site. We also have an amazing custom development team ready for all of your WordPress or web development requests. It’s a far smoother process than hiring (and firing) dozens of overpriced freelancers.
Building your first web app isn’t easy. You will have to do everything from creating the mockups to optimizing for better conversion rates. With a little help, however, you can go from prototype to live in a few short weeks and set your web app dreams in motion.
Web Design and UI
1. Smashing Magazine
2. Hongkiat
3. Introduction to Typography
4. Niice Design Search Engine
5. Designer News
6. MockingBird
7. Basic Wireframing
8. Advanced Wireframing with Keynote
9. Creating Your First Mockup
10. UI Design Resources
11. Planning Your Website with Sketches
12. 16 Tips for a Better Website
13. Startup Tips from Pro Designers
UX
1. How to do UX
2. Six UX Mistakes to Avoid
3. A Project Guide to UX Design
4. Don’t Make Me Think: A Commonsense approach to Usability
5. 52 Weeks of UX Design
Testing
1. Ultimate Guide to A/B Testing
2. TechRadar Guide to Testing Your Website
3. Introduction to Web App Testing
4. Getting Started with Conversion Rate Optimization
Universal Accessibility
1. A Book Apart: Responsive Web Design
2. Responsive Web Design: What is it and How to Use it
3. 30 Useful Responsive Web Design Examples
We know how important effective communication is for our clients on any web development project. So, we’re offering up this handy ‘glossary of terms’ that you will find helpful for your next PSD to HTML project, or if you’re just beginning to learn about the design-to-code process.
We know how important effective communication is for our clients on any web development project. So, we’re offering up this handy ‘glossary of terms’ that you will find helpful for your next PSD to HTML project, or if you’re just beginning to learn about the design-to-code process. This list of web development definitions is especially helpful for creatives and designers who are migrating from print to the web space.
If there’s anything else you need clarified, please let us know. We’re happy to add to this list to make the PSD to HTML process easier!
We’re extremely proud to be part of Capital Factory, where President Obama visited last week. As a buzzing technology hub it’s no surprise that President Obama and the CTO of the United States chose to visit Austin.
We’re extremely proud to be part of Capital Factory, a technology incubator, where President Obama visited last week. Austin is a buzzing technology hub so it’s no surprise that President Obama and the CTO of the United States chose to visit. He discussed a wide range of topics with us, from the JOBS act to the new Open Data Executive Order. It was an honor to meet him and an amazing spotlight on the Austin technology community.
We wanted to share some highlights from the President’s visit:
We are lucky enough to get to work with creative and technology professionals every day at The Site Slinger, so it was great to hear Joshua Baer quoting now Austin-resident, Dr. Bob Metcalfe (inventor of ethernet), say, “Celebrate our entrepreneurs like we celebrate our athletes.” to President Obama.
The President’s visit certainly did this, and we hope there’s a continued effort to highlight the creative and entrepreneurial people like you that we get to work with from Austin to Australia!
When it comes to growth in technology, Austin is a unique place. The innovative spirit of Austin combined with the physical space at Capital Factory creates the density necessary for fast growth. It’s great to see this happening not only in Austin, but all over the globe in technology hubs.
If you’re one of those designers who prefer to design within a single master PSD file, while still being able to reuse elements and see design variations, then you’ll find the Layer Comps feature of Photoshop particularly useful. For comparing different design variations, don’t waste your time remembering the different layer positions, visibility states, and layer style settings. Keep your workflow efficient and your file easily deciphered by your developer, client or project manager.
If you’re one of those designers who prefer to design within a single master PSD file, while still being able to reuse elements and see design variations, then you’ll find the Layer Comps feature of Photoshop particularly useful. We know we do with our PSD to HTML projects.
For comparing different design variations, don’t waste your time remembering the different layer positions, visibility states, and layer style settings. Keep your workflow efficient and your file easily deciphered by your developer, client or project manager.
Layer Comps are an underused and incredibly helpful feature Adobe introduced in Photoshop CS. Layer Comps, or compositions, allow you to create and manage variations of your design without having to resort to multiple PSD files. Simply put, it gives you a snapshot of a state of the Layers panel. For web designers, this lets you clearly define what a page state should look like. It will also allow your developer the convenience of quickly moving between views, or referring back to the original state, without toggling the visibility of layers or shifting layer positions.
How to create a Layer Comp:
1. Adjust your layers into the design variation you want to save
2. Open the Layer Comps window (Window>>Layer Comps)
3. Click the ‘paper’ icon to “Create New Layer Comp” and name it
4. Repeat these steps for all variations you’d like to later view and manage
Options you can set for Layer Comps:
• Layer visibility – show or hide
• Layer position – save the position of each layer within the design
• Layer appearance – save the Layer Styles settings applied to each layer
We recommend using the Layer Comps feature of Photoshop for your PSD to HTML projects so you can communicate your design more clearly, and developers can easily see the variation or different page states. If you wanted to later, you could even save the Layer Comps into individual PSD files (File>>Scripts>>Layer Comps to Files), so there’s no loss in flexibility there. The organization of your designs and shareability of the PSD file will be improved, and your client, project manager and developer will love you for it!
You can read more about the specifics of using layer comps directly from Adobe, here.
