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ú 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 Archivo->Exportar->Guardar como formato para Web y guárdelos. al archivo que desee en la carpeta utilizada.

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 requiere que 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. para eliminar las innecesarias. Descubrimos que es demasiado agotador cortar las imágenes a la 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 realizar un corte preciso.

2. Corte de imágenes preciso

Ahora usemos 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 Archivo->Exportar->Exportar capa para establecer sus propiedades, seleccione la ubicación de almacenamiento y guarde el tipo, verifique el área transparente, entrelaza, recorte la capa y finalmente Ejecute 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->Preferencias->Complementos->Verificar habilitar generador y haga clic en Aceptar. Seleccione Archivo—>Generar—>Recursos de imagen. 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, así que sólo puedo decírtelo de manera aproximada (no me importará la parte del texto por ahora, te contaré los detalles sobre la tercera imagen).

En primer lugar, oculte todas las capas que se van a 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 entraré en el video ni en el texto de arriba, es simple, simplemente corte la imagen de promoción del automóvil en la parte inferior en una imagen grande, lo cual 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. , que debe vincularse, simplemente dibuje áreas calientes irregulares. ¡Esto es más fácil!

2. Corte la imagen en lo 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 los puntos 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, solo agregue un color de fondo y luego corte las otras partes tan grandes como deberían. y luego use CSS para posicionarlos absolutamente, establezca la relación del índice z y ¡está bien!

He hecho esto muchas veces antes, todo esto se basa en la experiencia, es completamente. Se puede lograr, si tiene alguna pregunta, ¡pregúnteme! Está completamente hecho a mano ~~

Pregunta 3: Cómo usar Photoshop para cortar páginas web 1. Primero, debe usar Photoshop para cortar imágenes. Abra el archivo fuente psd y observe el diseño general del archivo fuente. Los archivos de origen están en capas, lo que facilita el corte de los niveles de dibujo.

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, puede hacer clic en "Archivo" en la barra de menú y seleccionar la opción "Guardar como formato web".

6. Seleccione el segmento que se 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 para 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 es algo que se pueda explicar claramente en una o dos oraciones.

Pregunta 5: En la interfaz de usuario ¿Cómo cortar PxCook para dibujos de diseño web? Aún no he usado una 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 recientemente comencé a entrar en contacto con este complemento.

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. era predominante (ahora debería haber menos diseños que usen este tamaño);

2.640*11365/5S/5C, el iPhone se actualiza y nuestro diseño también debe seguir el ritmo de los tiempos (debería haber algunas personas). todavía uso 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 debería usarse, y me dijo que usara IP6, es fácil de adaptar y será @2x cuando se corte, y los lados superior e inferior. Se puede arreglar si lo cambio.

Pregunta 6: ¿Generalmente solo se corta la parte del botón cuando se cortan imágenes en una página web? ¿Se implementan otras cosas, como el fondo, mediante CSS, como logotipos de sitios web e imágenes relacionadas con sitios web? como imágenes de productos, imágenes de formas irregulares, etc.), degradados y 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 imágenes 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 y muévase a en la imagen verá una línea de referencia verde, como se muestra en la imagen

Organice las líneas de referencia, luego haga clic en el icono de la herramienta Cortar en la barra de herramientas y luego haga clic arriba

en. la barra de opciones de "corte basado en guías". 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". , porque 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 de "Configuración", seleccione "Otros"

Aparecerá una ventana "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, 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 y no 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 no deseado seleccionado, dejando solo 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. Esto 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 cualquier corte en la imagen

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

Menú desplegable de tipo de guardado Despliega el cuadro y selecciona "HTML e imágenes"

Guardar

¡O usa la herramienta de corte de Photoshop!

Este es un tutorial

Espero que esto te ayude

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

presiona Ctrl+Alt? +A al mismo tiempo, puedes cortarlo.

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, 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 Mockup PS desde el sitio web oficial de Mockup. Una vez instalado el complemento, abra PS, busque el complemento Mockup 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 personalizados y cortes. compresión de imágenes, muy conveniente.

Haga clic para ingresar la descripción de la imagen