Editor 6 - Cómo usar una plantilla PSD con BaseKit V6 – BaseKit Soporte

Adapta fácilmente una plantilla PSD para usarla con la nueva versión de BaseKit

Resumen

Las primeras versiones de BaseKit requerían un archivo PSD especialmente diseñado para crear una plantilla. Con BaseKit V6 los gráficos de cualquier aplicación pueden usarse para crear un diseño equivalente.

Abre tu plantillas en Photoshop

?name=media_1315384021546.png

Puedes diseñar tu propia plantilla en Photoshop o descargar alguna de las miles gratuitas que hay en internet. No tiene porque estás separada en capas, una imagen plana funciona igual.

PASO 1: Haz visibles las guías y los cortes

?name=media_1309274458406.png

En Photoshop activa Snap (1), Smart Guides y Slices (2). Con esto se mostrarán las guías visuales.

?name=media_1315384132178.png

Ajusta guías visuales a tu diseño de esta manera, separando mediante filas por secciones.

PASO 2: Crea cortes

?name=media_1309274774286.png

Selecciona la herramienta de corte (1).

?name=media_1315384323955.png

Haz clic y arrastra con la herramienta de corte desde la esquina superior irzquierda hasta la esquina inferior derecha para crear un corte de imagen. Las líneas guía se asegurarán de que el corte sea exacto y abarque toda la dimensión de la imagen.

?name=media_1315384879770.png

Con la herramienta de corte aún seleccionada, haz Ctrl+clic (Mac) o Clic derecho (Win) sobre la porción que acabas de recortar y selecciona Edit Slice Options (1). Dale un nombre al corte (2) y verifica que el ancho del corte concuerde con el ancho de tu página en BaseKit (3).

Repite el proceso si hay más capas que desees importar.

PASO 3: Exporta tus cortes como PNGs

?name=media_1309275957497.png

Selecciona Save for Web & Devices del menú File

?name=media_1315384994505.png

Selecciona el tipo de archivo en el que deseas guardar tu documento (1). BaseKit soporta PNG-24 y JPEG. Usa PNG-24 si tu diseño contiene transparencias - No la guardes como GIF.

Haz clic en Save (2) para exportar tus archivos

?name=media_1315385098523.png

Cuando estés guardando tu archivo, selecciona All User Slices (1) y después haz clic en Guardar (2).

PASO 4: Importa tus cortes a BaseKit

?name=media_1315385193750.png

Inicia sesión en BaseKit. Haz clic en la pestaña Media (1) y después haz clic en Añadir (2). Busca en tu ordenador y selecciona los archivos que acabas de exportar de Photoshop (3). Puedes importar a BaseKit hasta un máximo de 5 archivos cada vez.

PASO 5: Añade la imagen al fondo del estilo de fila

?name=media_1315385252280.png

Crea un nuevo estilo haciendo clic en el botón para Añadir estilos de fila (1).

?name=media_1315385280826.png

Dale un nombre al estilo de fila que puedas recordar facilmente después (1) para que puedas identificarlo si necesitaras hacer algún cambio.

?name=media_1315385353694.png

Selecciona Interior (1) y selecciona Imagen del menú de Fondo (2). Arrastra la imagen que quieres usar a la caja de imagen (3). Haz clic en Guardar cambios (4).

?name=media_1315385477949.png

Este nuevo estilo ahora podrá aplicarse a cualquier fila.

Artículos en esta sección

Editor 6 - Cómo usar una plantilla PSD con BaseKit V6