How to crop and have so the resources images that you have created on Photoshop to pass them to the developer?

There are so many methods. Let's see in detail:

Generate > Image resources

Photoshop CC has introduced a new feature by which going to rename files with a certain root will be recognized and then exported.

You can generate JPEG, PNG, or GIF image resources from the contents of a layer or group of layers in a PSD file. Resources are automatically generated when you add an image format extension that is supported to the name of a layer or group of layers. Optionally, you can also specify the quality and size parameters to be applied to the generated image resources.

To generate image resources from this PSD file, follow these steps:

  1. With the PSD file open, select File > Generate > image resources.
  2. Add the desired format extension (. jpg,. png, or. gif) to the name of the layer or group of layers from which you want to generate the image resources. For example, change the name of the Rounded_rectangles and ellipses layer groups to Rounded_rectangles. jpg and ellipses. PNG and the Ellipse_4 layer in Ellipse_4. gif.

A little cumbersome, unless you expect to rename each file from the beginning of your work.

Plugin

Use Cutandslice to export resources to different devices in seconds. Improve your workflow by simply naming your levels.

Not everyone renames their layers correctly. But if you have this discipline, you can export your resources in seconds. Simply add a few characters to the end of the layer names.

Cut and cut the cuts and export them in PNG format by cutting the pixels you do not need, or let you specify the size you want. Or you can export all the states of your buttons in the blink of an eye.

A design to dominate all resolutions

Design at full resolution and export it in different sizes.

Cut and cut export to IPhone and Android, also removes all unsupported characters in the filename.

For iPhone design for retina, for Android design for xxhdpi and then export to ldpi, MDPI and hdpi with a single click.

How do you do it?

Before you start (is compatible with CS6 and not over)

Some things you should know:

  • You have to design for maximum resolution. This is retina for Apple devices and xhdpi for Android devices.
  • Cut & Slice Me only checks the group names for performance reasons, and then cleans up doc and group objects in the folders.
  • I recommend that you check in "Snap vector tools and transform to pixel grid" in the General Preferences panel.
How to export objects

You can export a layer by selecting it, and then click "Cut selected" (works with groups and layers).

Or you can export all the groups you want at once:

It's easy. The only thing you need to do is to include ' @ ' at the end of all the group names you want to export, then click ' Cut all Resources '.

I don't want to export all the document, I just want all the resources I have included in a group

If you click "Cut subgroups", Cut & slice Me will export all "@" levels within this group.

How to export the state of buttons

You have to put all the state of the buttons in different groups and name them as follows.

I thought it was nice to have a standard system to name layers/files that should be semantic at the same time. This is why I don't use the same keyword for clickable buttons.

 

Cut-and-slice-Me Demonstrations-img

Script

This script is easy to operate and allows you to save various formats for Android. To operate it just go to the menu of Photoshop and operate the script loading also from the desktop. Starting from the largest version xxxhdpi

The script works by duplicating the selected layer (or layer) to a new document, then scaling it to each of the 5 most common Android sizes (XXXHDPI, XXHDPI, XHDPI, HDPI, and MDPI) and then placing the files inside a folder next to the PSD.

Smart-slices

Quickly slice designs in place and export pixel-perfect image assets at multiple resolutions.

A complete solution for slicing designs in place and exporting pixel-perfect image assets at multiple resolutions in any supported format including SVG.

Website

Zeplin

With Zeplin you will not have to do anything, if not export directly the artboard. The work will do it all by generating the resources images and providing the developer with the CSS codes of each icon. Be careful not to nest your layers too much: if you color a blue icon and apply a red filter layer at the same time, the icon in the eyes of Zeplin will remain blue.

Picture Results for Zeplin

Retinize en

The Best Photoshop actions for preparing designs
For IOS or optimized for retina-display websites

It installs as a normal Photoshop action and allows you to get @ 1 @ 2 and @ 3 of iOS.

Asset-Studio

A collection of online tools to easily generate assets such as launcher icons for your Android app.

 Android Studio includes a tool called Image Asset Studio that helps you generate your app icons from material icons, custom images, and text strings. Generates a set of icons at the appropriate resolution for each generalized screen density supported by your app. Image Asset Studio Positions Newly generated icons in density-specific folders in the project's RES/directory. During the runtime, Android uses the appropriate resource based on the screen density of the device on which your app is running.
Image results for asset-studio

 

Bjango

A comprehensive set of app icon templates for Photoshop, Illustrator, Sketch, and Affinity Designer. The templates cover Android, IOS, MacOS, Apple TV (TvOS), Apple Watch (watchOS), IMessage, Windows, Windows Phone and Web favicons. Where possible, they're set up to automate exporting final production assets. All free and open source, released under the BSD license.

https://bjango.com/designresources/

RESONATOR

Resonant is an extension for collecting, exporting,
and storing graphical resources for various mobile platforms and the Web.

CANALI TELEGRAM
Offerte Spesa Online: t.me/amazonspesa
Sconti moda Donna: t.me/scontidimoda
Offerte viaggi weekend: t.me/offerteweekend
Categorie: ArticlesBlog

Lascia un commento