ejemplos practicos de photoshop

Adobe Photoshop

Adobe Photoshop (Taller de Fotos) es una aplicación informática en forma de taller de pintura y fotografía que trabaja sobre un "lienzo" y que está destinado para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits (o gráficos rasterizados).

Es un producto elaborado por la compañía de software Adobe Systems, inicialmente para computadores Apple pero posteriormente también para plataformas PC con sistema operativo Windows.

Photoshop en sus versiones iniciales trabajaba en un espacio bitmap formado por una sola capa, donde se podían aplicar toda una serie de efectos, textos, marcas y tratamientos. En cierto modo tenía mucho parecido con las tradicionales ampliadoras. En la actualidad lo hace con múltiples capas.

Photoshop como su nombre indica es básicamente una herramienta para edición de gráficos e imágenes. En primer lugar que no fue creado para manejar gráficos y edición de fotos, pero con el paso del tiempo y una fuerte participación de los gráficos en diseños web allanó el camino para la adición de características de diseño de web y las opciones de Photoshop. Fuegos artificiales, por otra parte, es principalmente un instrumento desarrollado para tratar con el diseño web Como regla general, Photoshop se puede utilizar para el diseño web, pero es mejor usar fuegos artificiales, ya que el peso es ligero y se encarga de la web de definición de las tareas mejor que el Photoshop. Sin embargo, usted puede utilizar una combinación de ambos, así como para manejar editar y crear gráficos Web.

Si alguien es puramente frente a los gráficos e imágenes, el Photoshop es un paquete totalmente profesional para hacerlo. Si en algunos se inclina más hacia el diseño de la Web a continuación, fiesta de fuegos artificiales es una opción mejor, evidentemente, en comparación con Photoshop. Si una organización tiene que trabajar tanto en web y diseño gráfico a continuación, se puede utilizar tanto las aplicaciones o pueden meter a Photoshop. Cuando se trate de edición de gráficos e imágenes, fuegos artificiales no es tan mejor como Photoshop.

La selección de la herramienta también depende de la palanca de la experiencia del diseñador. Si alguien está utilizando Photoshop desde el principio, entonces él / ella debe seguir con él porque Photoshop es un programa en constante evolución, que está mejorando su línea de opciones y funciones todos los días. Si una persona es nueva en el campo de diseño web a continuación, fiesta de fuegos artificiales es claramente la opción más adecuada. Recuerde que en cuenta que Photoshop contiene las características web, pero no fue creado principalmente para los diseñadores web. En contraste, los fuegos artificiales tiene por objeto exclusivamente el diseño de la Web ofreciendo así un enfoque mucho mejor para el diseño web. Sin embargo, usted puede hacer casi todo, tanto en las herramientas de lo que realmente depende de su experiencia y nivel de confort.

Photoshop maneja píxel gráfica basada en las técnicas que mejor se adapte a los monitores basados en píxeles. Todos los monitores CRT y pantallas LCD se utilizan actualmente son basados en píxeles para que Photoshop en última instancia, puede manejar todos los tipos de imágenes fácilmente. En comparación con fuegos artificiales, que ofrece un estilo diferente de manejo de gráficos a continuación, Photoshop es querido por muchos profesionales de la industria. Una de las principales razones de la popularidad de Photoshop entre los profesionales es que ha estado allí durante tanto tiempo. Sin duda es cierto que cada aplicación tiene sus ventajas y desventajas. Photoshop no es fácil de aprender. De hecho, ofrece un montón de características que una nueva persona puede fácilmente perderse en ellos. Fuegos artificiales, por otra parte, es fácil para un principiante, y ofrece una interfaz de luz.

Al final, la mayoría de las organizaciones no es posible realizar todas las tareas fácilmente en una herramienta para que utilicen estas dos herramientas de diseño web más rápido o de edición de gráficos. Cuando hablamos de diseño web, se mezclan las dos cosas en una. Así que tienes que editar gráficos Web, pero con el punto de vista. Es aconsejable utilizar una mezcla de las dos herramientas para una mayor productividad.

Ejercicio replica Web (Diseño)

Que son los CSS y cual es la ventaja de trabajar con CSS

CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación.

CSS
(Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología
desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación. A pesar de que la recomendación
oficial del grupo de trabajo de la W3C ya había alcanzado la estabilidad requerida para que fuera soportada por los
principales navegadores comerciales, como Netscape e Internet Explorer, tan
tempranamente como en el año 1998, la situación de entonces, comúnmente conocida
como la “guerra de los navegadores”, hacía que los intereses comerciales de
las dos compañías en lucha por el mercado de usuarios de Internet se interpusieran
en el camino de las CSS.

Netscape 4 e Internet Explorer 4 incorporaron
parcialmente un soporte a esta recomendación, pero éste dejaba mucho que desear,
especialmente en Netscape 4, por lo que no era plausible la incorporación de
las CSS en el diseño
de sitios salvo en un muy mínimo número de características, y esto aún con reservas,
puesto que la manera de tratar los estándares era muy diferente y por eso ni
aún así se podía asegurar una visualización correcta de la misma hoja de estilos.
El uso más amplio de las posibilidades de las CSS en Netscape 4, por ejemplo, podía llegar a causar un"crash" en el browser sin
explicación alguna. Internet Explorer 4 tenía una mejor implementación de la
recomendación CSS nivel 1,
pero, de nuevo, parcial -aunque permitía el uso de un mayor número de características,
como aquéllas que exceden a la tipografía (la parte de las reglas de las CSS pensada para reemplazar al tradicional uso de tablas en el diseño de "layouts").

La situación, hoy, es muy diferente. Netscape
4 acaparaba, según estadísticas, el 80% de usuarios, al menos en Estados Unidos.
Desde el lanzamiento de Internet Explorer 5 -que tuvo problemas al principio,
luego solucionados mayormente con la versión 5.5-, esta situación cambió radicalmente
y hoy es éste el navegador más usado.

No obstante no incorporaba el soporte
completo de las CSS nivel 1.
Habría que esperar a las recientes versiones 6, para esto, e incluso para un
soporte parcial de las CSS nivel 2.
Otros navegadores, como Opera (el tercer navegador más usado), cuya última y
también reciente versión es la 6, incluye el mismo soporte.

A diferencia de entonces, hoy, CSS ya no es una novedad, pero ahora ya no hay pretextos para no usarla. Y es posible
utilizar ciertas posibilidades más amplias de las CSS,
como el control de otras características gráficas tales como imágenes y colores
de fondo, márgenes exactos y bordes, para evitar el trabajoso y a veces poco
gratificante diseño de tablas complejas para un "layout", que incluye frecuentemente
tablas anidadas y complicados algoritmos de combinación de celdas (me refiero
a la forma en la que los navegadores resuelven esto para su graficación), características
que hacen al archivo muy pesado para descargar, porque inundan el código con
la extensa serie de etiquetas requeridas. Y también, hoy, la "guerra de los
navegadores" ha terminado, y la W3C y los estándares empiezan a liderar el camino, por lo que ya no hay tantas trabas para un uso más extendido, aunque medido, de las CSS.

En vista de esta breve recapitulación,
entonces, podríamos decir que los beneficios de usar CSS son dobles. Por un lado, evitamos hacer a los archivos demasiado pesados (excluyendo
el largo código requerido para las tablas anidadas y el añadido de características
gráficas), y definimos el "estilo visual" de un sitio entero sin necesidad de
hacerlo etiqueta por etiqueta, para cada una de las páginas. Por otro, trabajamos
con estándares, y separamos hasta cierto punto la estructura (vale decir, el
código) de la presentación, logrando una manera más nítida de trabajar, y lo
que es más: en un sencillo documento CSS,
definimos lo que yo llamaría una "plantilla gráfica" para todo un sitio. Vale
decir, que cualquier cambio hecho a un estilo CSS,
se reflejará en todos los elementos que sean referidos a éste, automáticamente,
con sólo editar un sencillo documento CSS.

Este tutorial se centra en el diseño de
un documento CSS pensado
para un sitio web entero, y sobretodo con el uso medido de las características
de CSS nivel 1, aunque
recomendando un uso medido de tablas para el "esqueleto" del "layout" de las
páginas (no obstante, el tutorial no cubre este aspecto; sólo el de creación,
sintaxis y edición de un documento CSS
externo enlazado a los documentos HTML).
Esto implica, por una parte, un "target" de navegador que no sea exclusivo de
la "última generación" (la cual comprende: IE 5, 5.5, 6, Netscape 6, y Opera
6). Por lo tanto, se intenta una correcta visualización de la página también
en Internet Explorer 4. Es posible que Netscape 4 muestre la página más o menos
correctamente, pero esto no debe preocuparnos ya que es un navegador que no
soporta estándares.

Propiedad Para Edición CSS

En esta oportunidad he querido citar a los compañeros de “la webera”, quienes de forma clara y precisa nos dan una breve explicación sobre la edición en css.

Este su link; http://www.lawebera.es/manuales/macromedia-dreamweaver/editar-crear-propiedades-css-adobe-dreamweaver.php

Herramientas:

Cuando nos encontremos diseñando una página, es conveniente que el cuadro de “Estilos CSS” se encuentre abierto, de no ser así podemos abrirlo desde el menú “Ventana / Estilos CSS” o con el método abreviado “Mayús+F11”, ya que desde allí podremos crear y modificar todos los estilos, mientras estamos visualizando los resultados.

Edición de reglas CSS existentes:

Esto se aplica a los elementos del diseño que ya han sido creados y que tienen sus reglas y propiedades definidas. Para editarlos se deben seguir los siguientes pasos:

1. Selección del elemento a modificar.

Para seleccionar las reglas CSS a editarse, hay dos métodos que se pueden emplear. El primero es seleccionar el elemento cuyas propiedades se van a editar desde la vista de diseño. Si el elemento es texto o imagen, basta con hacer clic en cualquier parte de los mismos. De inmediato aparecerán las reglas y propiedades que definen al elemento en el cuadro. Si el elemento es una capa (div) o una tabla (table), se debe hacer clic en el borde del elemento. En este caso, aparecerán las reglas que definen a la capa o la tabla, así como las de todos los elementos padre del mismo.

2. Modificación e introducción de propiedades

En la parte superior del cuadro, hay dos pestañas que permiten seleccionar entre ver todas las tablas o la actual (seleccionada). Al seleccionar la última, aparecen tres divisiones iguales a las que se muestran en la imagen. En la división superior aparecen todas las propiedades del elemento, aún aquellas que no están especificadas y tienen valores por defecto.
En la división del centro, se muestran la regla involucrada y todos sus padres, hasta llegar a “body”. En la división inferior aparecen las propiedades que figuran en el archivo CSS a la izquierda, mientras que los valores respectivos aparecen a la derecha. Esta sección es editable, bastando para ello hacer clic en la celda que se pretende editar e introducir los nuevos valores.
En la última fila aparece una celda a la izquierda que dice “Añadir Propiedad”. Haciendo clic en ella es posible introducir una nueva propiedad, escribiendo su nombre o seleccionándola del menú desplegable que aparece allí. Hagamos una prueba de ejemplo. Seleccionaremos la capa del encabezado de la página, haciendo clic en el borde. Luego, en la sección inferior haremos clic en “Añadir Propiedad” y buscaremos las propiedades de borde. Seleccionaremos “border-color” y seleccionaremos el color de borde de la paleta de colores que aparece. Luego introduciremos la propiedad “border-width” a la que le daremos 1px, y la propiedad “border-style”, introduciendo “solid”. Luego de finalizada esta introducción de propiedades, un borde azul debe aparecer alrededor de la cabecera.

Introducción de nuevas reglas

Para introducir una nueva regla, en el ejemplo deberemos crear un elemento nuevo, ya que todos los elementos que se encuentran en la página actual tienen definidas sus reglas y propiedades.

Introduciremos una nueva capa, que será el inicio de un menú sencillo. Haremos un menú horizontal debajo de la cabecera. Para ello deberemos colocar una nueva capa. En la vista de código, haremos clic a continuación de la etiqueta de cierre de la capa del encabezado. Luego daremos “enter” para que se genere una nueva línea en el código, donde introduciremos el nuevo elemento.

Luego haremos clic en “Insertar / Objetos de diseño / Etiqueta div”, abriéndose un nuevo cuadro flotante donde deberemos indicar el lugar donde colocaremos la etiqueta, el nombre de la clase y el Id (o uno solo de los dos, según sea el caso).

Luego de haber rellenado los datos, haremos clic en “Crear nueva regla”, tras lo cual aparece otro cuadro, donde en primera instancia seleccionaremos el tipo de selector que se trata (class, id, una etiqueta html o un selector compuesto) y el lugar donde va a quedar definida la nueva regla.

Tras hacer clic en “Aceptar”, se abrirá el cuadro donde se definen las propiedades de la nueva regla, en el cual colocaremos todas las propiedades que definan a la nueva regla. En este cuadro hay una columna izquierda, donde seleccionaremos la categoría de propiedades que introduciremos. Al hacer clic en ellas, aparecen las distintas propiedades a las cuales podremos ir dando los diferentes valores.

Para el ejemplo, definiremos las siguientes propiedades con los respectivos valores:
• Font-family: Arial, helvética, sans-serif
• Font-size: 12px
• Font-style: normal
• Line-height: 20px
• Font-weight: bold
• Font-variant: normal
• Text-transform: none
• Text-decoration: underline
• Color: #FFF
Luego seleccionaremos “Fondo” a la izquierda e introduciremos el siguiente valor y dejando el resto en blanco:
• Background-color: #06F
Luego iremos a cuadro, donde introduciremos el ancho de la nueva capa (la altura está dada por la propiedad “line-height”) en 99% para que junto al 1% del relleno derecho e izquierdo ocupen todo el ancho del diseño.
El resto de las categorías de propiedades y sus valores los dejaremos en blanco, ya que no serán necesarios para establecer la capa que albergue un menú. Al hacer clic en “Aceptar” volveremos al primer cuadro de creación de nuevas reglas, donde haremos clic en “Aceptar”. De esta forma quedará conformada la nueva capa, que aparecerá con un texto indicándonos que deberemos introducir un contenido.

Comentario Sitios Web

Acosta Baquero Julián Hernando

1. cuál es la primera impresión que tubo cuando vio el sitio
La interfaz le permite al usuario entrar en el contexto de la página, da la impresión de ser un sitio donde se exponen artículos y nuevas tendencias para decoración de interiores.
2. cumple los objetivos del usuario?
Si, la información que brinda es certera, da respuesta a los cuestionamientos de usuario sobre como decorar su entorno (este en ultimas es el objetivo).
3. en que acertaron
(Estrategia de venta del producto), muestran de una manera agradable los artículos que ofrecen logrando captar el interés del usuario y produciendo en este la sensación de haber encontrado lo que busca.
4. en que no acertaron
el sistema de categorización y clasificación no es lo suficientemente claro, el usuario podría perderse tratando de buscar un colección de años anteriores puesto que la clasificación le obliga a dar una gran cantidad de click para llegar a una colección anterior, esto podría ser un causante de deserción en el usuario .


Araujo tróchez Laura Marcela

1. cuál es la primera impresión que tubo cuando vio el sitio
Por momentos pareciera ser un sitio web de cine. Yo creo que lo que causa tal confusión en la página principal es la ubicación de las imágenes y la saturación de texto.
2. cumple los objetivos del usuario?
Si, croma es una revista para un selecto grupo de usuarios, usa clasificaciones y categorizaciones que le permiten a este encontrar rápida y fácilmente la información que desea encontrar.
3. en que acertaron
Las estructuras de organización que usaron son apropiadas para lograr el objetivo del cliente y del usuario.

4. en que no acertaron
La interfaz grafica es muy plana, la simplicidad es un elemento que proporciona elegancia en el diseño pero en exceso puede causar la sensación de dejadez (falta de experimentación por parte del diseñador).

Mora molina Diana Lorena

1. cuál es la primera impresión que tubo cuando vio el sitio
La imagen de la modelo en el centro es un elemento que ayuda a ubicación contextual de usuario, yo por ejemplo asumí que era una paina que trataba de temas para hombres (no machos machotes pero si para hombres).
2. cumple los objetivos del usuario el sitio?
Si. Abarca los temas que le podrían interesar a un macho y los presenta de manera que este pueda acceder a ellos con facilidad.
3. en que acertaron
La interfaz grafía es interesante, sale de común, es una nueva propuesta que podría hacer que el usuario sienta interés por saber que va a encontrar en el sitio y lo explore aunque no se considere un macho.


Salazar Tangarife Andrés Felipe

1. cuál es la primera impresión que tubo cuando vio el sitio
Es un sitio que tiene que ver con las aulas de clase, aquí podría encontrar una explicación a algo.
2. cumple los objetivos del usuario el sitio?
Si. Información que brinda es apropiada, da respuesta a los cuestionamientos del usuario abarcando los temas que le podrían interesar de una manera sencilla.
3. en que acertaron
La organización de la información y el lenguaje que usaron es apropiada para el tipo de público que maneja este sitio. Yo creo que el principal reto era lograr que el usuario pudiera navegar con facilidad en el sitio, verse identificado con el lenguaje y que este encontrara respuesta a sus cuestionamientos. Doble cick logra que esto suceda perfectamente.

Vélez García Diana Fernanda

1. cuál es la primera impresión que tubo cuando vio el sitio
A primera vista el sitio deja notar que es un sitio web donde podría encontrar publicación y comprarlas.
2. cumple los objetivos del usuario el sitio?
Si. La el sistema de clasificación que usan es preciso y adecuado para la temática del sitio, este elemento hace que para el usuario sea de grata y enriquecedora la experiencia.
3. en que acertaron
Las estructuras de organización de la información y la interfaz grafica son apropiadas.

EL PAPAYASO!

farnandula amarillista Clombiana

pagina principal

foro




quien dio papaya / El cachon

quien dio papaya

chisme bomba