Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Adobe Photoshop

  • Adobe Muse
    How to Create Buttons in Photoshop and Adobe MusePreview mues 4
    248 shares
    In this tutorial I'll show you how to create a button in Photoshop and use it, with all its various states, in an Adobe Muse project.Read More…
  • Adobe Photoshop
    Designing a Web App UI Kit‏ in Adobe PhotoshopWeb app ui kit preview
    373 shares
    Style guide driven development offers a hugely flexible approach to modern web design. In this tutorial I'll walk you through designing a UI (user interface) kit, whilst also explaining the decision-making that will keep our UI kit consistent and reusable.Read More…
  • InVision
    3 Ways to Get Feedback From Clients With InVisionLiveshare
    83 shares
    In this tutorial we're going to use InVision's commenting and LiveShare options to maximize feedback from your clients and teams.Read More…
  • Avocode
    Introducing Avocode — PSD to Code Without PhotoshopAvocode
    285 shares
    Avocode is a program, currently in private beta, which is purpose built for the process of going from PSD (or Sketch) to code. In this article we'll take a deep look at what's to come.Read More…
  • Adobe Creative Cloud
    Adobe Extract: Free Code Extraction From PSD Files in the CloudExtract1
    118 shares
    Adobe Extract is a free web-based tool, purpose built to streamline the PSD code extraction process for teams using Photoshop as a major element in their workflow.Read More…
  • Adobe Photoshop
    Photoshop CC 2014: What’s New for Web Designers?Psd
    382 shares
    Last month saw the launch of the all new Photoshop CC 2014, with lots of great new features, especially for web designers, including improved Layer Comps and better Typekit integration. In this tutorial, you'll learn about the main new features, and learn how to get started using them.Read More…
  • UI Design
    Designing a Simple Instagram Based Portfolio in PhotoshopInstagram portfolio
    307 shares
    In this tutorial I'll guide you through the process of creating a simple and clean Instagram-based portfolio. We'll use some striking imagery, a clean color palette and smooth typefaces. We'll start off by creating a web version and then I'll show you how to quickly adapt it for mobile view.Read More…
  • Color Theory
    6 Beginner “Safety First” Color Guidelines for the WebColor preview
    674 shares
    In this tutorial I’ll be sharing with you six sure fire, “can’t go wrong” guidelines you can follow to get a foundational grasp on working with color in web design.Read More…
  • Animation
    How to Use After Effects for Web Animation PrototypesPreview
    629 shares
    In this screencast tutorial we're going to prototype an app UI animation. We'll take a Photoshop layout, then bring it to life using Adobe After Effects.Read More…
  • Adobe Project Parfait
    Quick Tip: Converting Photoshop Files to Code With Project ParfaitParfait
    391 shares
    Project Parfait is a new tool from Adobe, currently in beta, which lets you open up any PSD directly in the browser to extract CSS, text and image assets from it. At the moment it only works on Chrome but Adobe plan to roll it out across all browsers as development moves on.Read More…
  • UI Design
    Designing an Elegant Blog Layout in PhotoshopBlog design 400px
    378 shares
    In this tutorial I am going to show you how to create a simple, elegant blog layout in Photoshop. We'll use a strong image above the fold (wherever that may be) with some straightforward messaging, followed by very clean and elegant typography.Read More…
  • CSS
    How to Code a Photoshop Layout With CSSHat, LESSHat and PNGHatPs web thumb 2
    284 shares
    In the previous tutorial we covered how to prepare a design in Photoshop, ready for conversion to pure CSS3 and Base64 code. In this tutorial we'll be handling the actual code generation, with the help of Photoshop plugins CSSHat and PNGHat made by Source, as well as FontAwesome and the CSS preprocessor LESS.Read More…