corte psd en línea: cómo cortar páginas web

Cómo cortar imágenes en Photoshop

1. Corte tradicional

(1) Abra un archivo psd, seleccione la herramienta de recorte en la barra de menú de la izquierda. de ps y seleccione la herramienta de corte. Primero, analizamos el archivo psd, lo dividimos conscientemente en varias selecciones y luego usamos la herramienta de corte para recortar el patrón que necesitamos arrastrando el mouse.

Los sectores marcados en azul son los sectores que seleccionamos manualmente, y los sectores marcados en gris son sectores generados automáticamente. Luego exporte estos sectores, seleccione Exportar-gt; en la Web, guárdelo en la carpeta que desee utilizar.

Pregunta: Al observar las operaciones anteriores, descubriremos que es demasiado problemático y requiere mucho tiempo cortar cada patrón uno por uno. ¿Qué pasa si un sitio web de comercio electrónico quiere que usted corte cientos de patrones? hay un método más conveniente a continuación Método:

(2) Generalmente, los diseñadores suelen usar líneas de referencia al diseñar. También podemos usar líneas de referencia para simplificar la operación de corte. Primero, seleccione la imagen de un patrón. desea cortar y luego use el mouse para arrastrar la regla izquierda o superior hasta el límite del patrón. El límite absorberá automáticamente la línea de referencia, por lo que es más precisa. está configurado. Puede configurarlo nuevamente de la misma manera. Líneas de referencia para otros patrones

Debido a las líneas de referencia densas, habrá muchos cortes que no necesitamos. mouse para eliminar las innecesarias. Descubrimos que es demasiado agotador cortar las imágenes de una vez de esta manera, por lo que debemos eliminarlas. Hay muchas porciones no utilizadas, por lo que se recomienda recortar el archivo psd pieza por pieza. luego desactive las líneas guía para comprobar la imagen cortada. Finalmente exporte los sectores a una carpeta.

Lo anterior es el método de corte tradicional, que es engorroso, lento e inexacto, por lo que utilizamos computadoras para cortar con precisión.

2. Corte de imágenes preciso

Utilicemos el script de Photoshop para realizar un método de corte de imágenes más rápido y preciso. Su ventaja es que el corte automático ahorra tiempo y esfuerzo, la computadora calcula automáticamente y las dimensiones son más precisas.

Primero abra un archivo psd, seleccione file-gt; export-gt; exporte la capa para establecer sus propiedades, seleccione la ubicación de almacenamiento y guarde el tipo, verifique el área transparente, intercale y recorte el archivo. capa y finalmente ejecutar la exportación. Este proceso tardará unos minutos. Se recomienda cortarlo zona por zona.

3. Corte preciso de la versión PhotoshopCC - corte automático

(1) Primero, seleccionamos un patrón que desea cortar y seleccionamos su capa. Luego configure los parámetros, seleccione Editar-gt; Preferencias-gt; marque Habilitar generador y haga clic en Aceptar. Seleccione Archivo-gt; Generar-gt; Descubrimos que se generará una carpeta .assets vacía en el directorio al que pertenece el archivo psd. Finalmente, cambiamos el sufijo del nombre de la capa a .png y encontraremos que hay más patrones que cortamos en la carpeta de activos. para que se corte un patrón.

(2) Basado en (1), es fácil exportar el formato SVG. Solo necesita cambiar el sufijo del nombre de la capa donde se encuentra el patrón a .svg. Cómo cortar una página web

Pregunta 1: ¿Cómo cortar una página web? ¿Cómo cortar una página web para diseño web? Primero debe utilizar software de procesamiento de imágenes para crear representaciones de páginas web. La representación es una imagen completa y es imposible utilizar la imagen completa en la página web. Recorte las partes útiles de las representaciones y utilícelas como materiales para la producción de páginas web. Este proceso se llama corte. (Por supuesto, también puede utilizar las herramientas de corte y selección, pero es más preciso utilizar la herramienta de corte).

El propósito de cortar es diseñar la página web con mayor precisión.

Photoshop, Fireworks y otros programas tienen herramientas de corte.

Pregunta 2: Cómo cortar la imagen en una página con este tipo de fondo al crear una página de diseño. . . Lo principal es cómo ajustar el fondo. . .

En este momento, no puedo decir a qué imágenes tienes enlaces, por lo que solo puedo decírtelo de forma aproximada (no me importará la parte del texto por ahora, te contaré más específicamente sobre la tercera imagen).

Primero, oculte todas las capas que desea vincular. Las capas restantes se pueden usar para cortar la imagen. El fondo general es azul, por lo que el CSS es suficiente.

En segundo lugar, el fondo tiene una imagen de fondo general, que debe recortarse por separado. ¡No coloque ningún otro elemento en la imagen, solo esta única imagen, y haga referencia a ella como fondo durante el diseño!

Entonces, el resto es la parte principal. No hablaré del video ni del texto de arriba, es simple, simplemente corte la imagen de promoción del automóvil en la parte inferior en una imagen grande, que también es simple.

Finalmente queda la parte intermedia más difícil. Después de pensarlo un rato, hay dos formas de implementarla, de la siguiente manera:

1. y necesita hacer enlaces, simplemente dibuje áreas calientes irregulares. ¡Esto es más fácil!

2. Corte la imagen en lo que sea que sea. Recorte cada imagen pequeña por separado (nota: para guardarla en formato png, configure el fondo como transparente) y luego use css para dibujarla cuando escriba html. Para crear gráficos irregulares de igual tamaño, agregue la imagen como fondo y luego use CSS para posicionarla absolutamente. Si hay un enlace, agregue un enlace para lograrlo perfectamente.

Nota: CSS para. Puedes encontrar un tutorial para dibujar gráficos irregulares en línea, solo échale un vistazo, ¡no es difícil!

En cuanto a las otras imágenes, hablemos brevemente de la segunda imagen. Si desea implementar la segunda imagen de manera simple, excepto el texto y el color de fondo puro, corte toda la hoja y luego caliente las áreas donde hay enlaces. Si desea hacerlo más complicado, puede usar lo que yo. Llame a CSS para dibujar formas irregulares. Tres barras verticales y horizontales de color sólido. No es necesario cortarlas. Simplemente dibuje con CSS, agregue un color de fondo y luego corte las otras partes tan grandes como sea necesario. , luego use CSS para posicionarlos absolutamente, establezca la relación del índice z y ¡está bien!

He hecho esto muchas veces antes en este sitio web, todo esto se basa en la experiencia, es completamente factible. , si tienes alguna pregunta, ¡pregúntame! Está completamente hecho a mano~~

Pregunta 3: Cómo usar Photoshop para cortar páginas web 1. Primero, debes usar Photoshop. Abre el archivo fuente psd. y observe el diseño general del archivo fuente. Los archivos de origen están en capas, lo que facilita cortar las capas de la imagen.

2. La herramienta para cortar imágenes se llama "slice", que se puede ver en el panel izquierdo. Haga clic derecho para ver los botones Herramienta de corte y Herramienta de selección de corte.

3. Utilice una lupa para ampliar la parte de la imagen que desea cortar. Puede utilizar la línea de referencia para determinar el tamaño. Puede cortar la imagen a lo largo de la línea de referencia.

4. Cambie a la herramienta de corte, dibuje un corte a lo largo de la línea de referencia, haga clic derecho para ver la opción para editar el corte y establezca el tamaño en píxeles del corte.

5. Después de cortar, puedes hacer clic en "Archivo" en la barra de menú y seleccionar la opción "Guardar como formato para web".

6. Seleccione el segmento que desea almacenar y luego configure el formato, la calidad y el tamaño de la imagen en la esquina superior derecha. Después de configurar, puede hacer clic en Guardar.

7. Guarde los sectores que deben guardarse, simplemente seleccione la ruta y haga clic en Guardar para completar. Abra la imagen guardada, como se muestra en la figura.

Notas

Tenga en cuenta que es mejor establecer la ruta y las opciones de configuración usted mismo al guardar.

Pregunta 4: Cómo usar PS para cortar imágenes HTML, detallado 10 puntos: Cortar en pedazos pequeños primero y luego escribir el código no se puede explicar claramente en una o dos oraciones.

Pregunta 5: En la interfaz de usuario Cómo cortar en PxCook para diseño web. Aún no he usado Mac, así que no sé qué tan asombroso es el legendario Sketch. PxCook es relativamente fácil de anotar en Windows. Aunque también viene con una función de corte de imágenes, es relativamente inútil y no se recomienda para cortar imágenes.

Herramienta para cortar imágenes:

Cutterman es un complemento de PS que es muy conveniente para cortar imágenes, pero no es compatible con la versión verde sin instalación de PS y tiene relativamente Altos requisitos para la versión de PS. Está dirigido a CS6. Ya no se mantiene ni se actualiza. Se recomienda instalar la versión oficial completa de PScc y luego descifrarla usted mismo.

Hay tutoriales de instalación y uso en el sitio web oficial, así que estúdielo usted mismo, porque comencé a entrar en contacto con este complemento recientemente.

Part2Photoshop

Varios tamaños de diseño que se usan comúnmente ahora

El tamaño de la era 1.640*9604 Este es el tamaño que se usa cuando se es nuevo en el diseño de aplicaciones. Los tiempos (debería haber menos diseños que usen este tamaño ahora);

2.640*11365/5S/5C, el iPhone se actualiza y nuestro diseño también debe seguir el ritmo de los tiempos (todavía debería haberlos). personas que usan este tamaño de diseño)), entrando en la era de la planitud;

3.750*13346 es actualmente el tamaño de diseño de mi borrador de diseño. El tamaño del iPhone6 ​​​​se puede adaptar a 4 y 5 hacia abajo y 6plus. hacia arriba; recuerdo el lanzamiento de IP6 Finalmente, le pregunté al director qué tamaño de diseño se debía usar y me dijo que usara IP6, que es fácil de adaptar. Si se corta, será @2x y la parte superior. y los lados inferiores se pueden arreglar si lo cambio.

Pregunta 6: ¿Es normal cortar solo la parte del botón al cortar imágenes en una página web? ¿Se implementan otras cosas, como el fondo, mediante CSS, como el logotipo del sitio web o las imágenes relacionadas con el sitio web? como imágenes de productos, imágenes de formas irregulares, etc.), los degradados y las fuentes especiales (fuentes distintas a Song, Hei y Microsoft YaHei) casi siempre se cortan en imágenes. El corte en imágenes se divide en dos tipos, uno se realiza configurando el fondo CSS y el otro se llama mediante etiqueta y ruta directas.

Todo lo demás se implementa usando CSS.

Pregunta 7: Cómo cortar fotos en páginas HTML en PS. Espero proporcionar una operación de proceso detallada. Después de modificar el texto y las imágenes correspondientes, generaremos el archivo PSD como un archivo (X)HTML. .

En primer lugar, debe dividir el archivo PSD. Hay dos métodos:

① Utilice la "Herramienta de corte" en la barra de herramientas,

Luego. en la imagen Marque las áreas una por una.

② Utilice el corte basado en líneas de referencia, presione Ctrl R para abrir la barra de regla,

Mueva el mouse a la regla, mantenga presionado el botón izquierdo del mouse, muévalo a la imagen y verá una línea guía verde, como se muestra en la imagen

Organiza las líneas guía, luego haz clic en el icono de la herramienta de corte en la barra de herramientas y luego haz clic arriba

en la barra de opciones "Corte basado en referencias". Entonces se convirtieron en cortes uno por uno en la línea de referencia original.

Luego puede generar:

①Seleccione "Archivo" → "Guardar para Web" → "Guardar" en la barra de menú.

② Luego aparecerá una ventana "Guardar resultados de optimización como", como se muestra en la figura.

Hay un cuadro de lista desplegable para elegir en "Tipo de guardado". Como queremos Guardar como formato de página web, seleccione "HTML e imágenes (*html)" y luego seleccione "Guardar" para generar un archivo HTML en formato de página web y una carpeta llamada "imágenes" que contiene imágenes.

③Si necesitamos generar "página web div css", también podemos hacer esto:

En el cuadro de lista desplegable en "Configuración", seleccione "Otros"

Aparecerá una ventana de "Configuración de salida"

Seleccione "Slice" en el segundo cuadro desplegable

Seleccione "Generar CSS"

Haga clic en "Aceptar" → "Guardar" para generar una página web HTML "div css" actualmente popular.

Pregunta 8: ¿Cómo cortan imágenes los diseñadores web? Los pasos son los siguientes:

1. creado por el diseñador Para completar, cuando cortamos la imagen, cortamos el archivo psd. Debido a que el archivo psd tiene capas, podemos cortarlo donde queramos.

2. Luego use el software Photoshop para abrir el archivo psd. Aquí Xiaoyu usa la versión CC para demostración, y otras versiones son similares. Después de abrirlo, podemos hacer doble clic en la herramienta lupa a la izquierda para ampliar la imagen al tamaño original.

3. Queremos cortar la imagen, por supuesto que usamos la herramienta "rebanar". Puede hacer clic en la herramienta de corte a la izquierda o puede hacer clic derecho en el icono para seleccionar más herramientas relacionadas. Utilice la herramienta de corte para cortar imágenes.

4. Después de seleccionar la herramienta de corte, simplemente arrastre el mouse hacia donde desee cortar y luego aparecerá la línea tangente. Haga clic derecho en el cuadro tangente para abrir el menú.

5. Haga clic en la opción Editar sector en el menú para editar el sector, incluido el tamaño y otros elementos.

6. Pero, ¿qué pasa si solo queremos las palabras, sin el fondo subyacente? Entonces podemos usar la herramienta "Mover". Seleccione la herramienta Mover y haga clic en el fondo no deseado. Esta capa se seleccionará en el panel "Capas". Asegúrese de marcar "Seleccionar capas automáticamente" arriba.

7. Elimina los ojos pequeños delante del fondo innecesario seleccionado, y finalmente solo queda la parte que queremos.

8. Luego haga clic en "Archivo" en la barra de menú en la esquina superior izquierda y seleccione la opción "Guardar para web".

9. Si desea que sea transparente, generalmente elija el formato png. Si no desea que sea transparente, elija el formato que almacene los archivos más pequeños, lo que puede garantizar que la página web se cargue rápidamente. Luego haga clic en el botón "Guardar" a continuación.

10. Luego, asigne un nombre a la imagen, elija una dirección para guardar y finalmente seleccione "Sección seleccionada", de lo contrario se guardarán muchas imágenes inútiles.

11. Finalmente busca la imagen guardada y ábrela. Ya es la imagen que queremos.

Pregunta 9: Cómo cortar imágenes en páginas HTML usando ImageReady

En segundo lugar, abra la imagen que desea cortar

Bajo el método de entrada en inglés, en el programa interfaz Presione K para cambiar a la herramienta de corte

Corte como desee en la imagen

Presione CTRL ALT SHIFT S para guardar los resultados de la optimización como

Desplegar en el cuadro desplegable tipo de guardado Seleccione "HTML e imágenes"

Guardar

¡O use la herramienta de corte de Photoshop!

Este es un tutorial

Espero que te ayude

Pregunta 10: ¿Qué significa cortar imágenes en una página web y cómo cortar imágenes si inicias sesión en QQ?

y presionas los tres. teclas Ctrl Alt A al mismo tiempo, puede cortar imágenes.

Si no ha iniciado sesión en QQ, el sistema también tiene su propia función de captura de pantalla, que es PrtScrSysRq en el teclado, pero esta es una captura de pantalla completa

Luego abra " Captura de pantalla" en Inicio ~ Todos los programas ~ Herramientas de archivos adjuntos" y luego presione ctrl imprimir (tecla PrtScrSysRq en el teclado)

La imagen cortada se puede guardar en su computadora o enviar a sus amigos.

¡Gracias! Cómo dividir porciones en PS en línea

PS tiene su propia herramienta de división, pero es más problemática de usar si está entregando un borrador de diseño de interfaz de usuario. Utilice herramientas de corte profesionales en línea como Mocke. La herramienta es más adecuada y puede generar automáticamente recortes de diferentes tamaños y resoluciones, y también admite el cambio entre diferentes plataformas.

Descargue e instale el complemento Mocke PS desde el sitio web oficial de Mocke. Una vez instalado el complemento, abra PS, busque el complemento Mocke en "Ventana> Funciones extendidas", selecciónelo y ábralo. él.

Haga clic para ingresar la descripción de la imagen

Después de iniciar sesión, seleccione el proyecto y el grupo.

Seleccione la mesa de trabajo, capa o grupo que desea cortar y haga clic en "Marcar corte".

Cuando aparece "-e-" antes del nombre del objetivo seleccionado, la opción "Marcar corte" cambia a "Cancelar marcado para corte" y se completa la operación de corte.

(Nota: para marcar cortes, solo necesita marcar las capas que deben cortarse. Marcar demasiados cortes inútiles puede provocar que la carga falle).

Haga clic en la ampliación cuadro desplegable El tamaño de la mesa de trabajo del borrador de diseño, seleccione la ampliación correspondiente al borrador de diseño. Ejemplo: un borrador de diseño de 750 px*1334 px corresponde a @2×.

Haga clic en "Cargar mesas de trabajo seleccionadas" o "Cargar todas las mesas de trabajo" para cargar el borrador del diseño al proyecto en la nube con un solo clic.

Haga clic para ingresar la descripción de la imagen

Haga clic en "Ver proyecto" para abrir el borrador del diseño. En el modo "Desarrollo", puede descargar la imagen cortada seleccionada o todas las imágenes cortadas. con un clic.

Haga clic para ingresar la descripción de la imagen

Al usar Mockup para cortar imágenes, puede cambiar rápidamente de plataforma (iOS, Android, Web) y seleccionar la ampliación, y admitir tamaños de corte y corte personalizados. compresión de imágenes, muy conveniente.

Haga clic para ingresar la descripción de la imagen