Criando 

Layout – Empresa de Tecnologia: Parte 1/2

Creación de diseño de tecnología empresarial: Parte 2/2

Guardar Guardar Fuegos Eiros de guardia!

En este tutorial, vamos a ver cómo crear un diseño para una empresa de tecnología utilizando algunas
técnicas no se usan en los tutoriales anteriores.

Requisitos previos
Fácilmente como el manejo de la Fireworks CS3 / CS4

meta
Crear un diseño para una compañía de tecnología de uso de fuegos artificiales

contenidoPaso 1 ­ Definir la estructura del sitio
Como ya he mencionado en el tutorial Creación de una página web Paso a paso: Parte 5 , aprobará
un alambre , o la creación de una estructura antes de que el propio desarrollo, nos ahorra tiempo y
otimizemos el proceso de creación. Pensando en ello, vamos a ver cómo el diseño se divide a
desarrollarse:
Figura 01 ­. Estructura metálica ­ Estructura de Sitio WebPaso 2 ­ uso de plantilla 960 Grid System
Gran parte de los diseños desarrollados por mí, yo uso como una base para la alineación y
proporciones, el 960 modelos de cuadrícula . Lo mismo ocurre con la descarga en la Web Oficial ­
960.gs y descompactemos archivos PNG. Cuando descompactarmos, vemos dos modelos: uno 12_col
(contiene 12 columnas) y otro 16_col (contiene 16 columnas).

Y cuál usar?
Simple. Por lo general (I dicho en general) si el diseño tiene 3 cajas (por ejemplo. "Sobre el servicio de
noticias de la empresa y, como en la Figura 01"), que utilizamos el modelo 12_col. Esto se debe a 12 es
un múltiplo de tres. Ya para el diseño con 4 cajas, nos gustaría utilizar el 16_col debido al hecho de que
el 16 sea un múltiplo de cuatro.

Entonces, abrimos el archivo 960_grid_12_col.png , tenemos:

02 :. 960 Grid System figura ­ 12 columnasPaso 3 ­ Creación Top ­ Tarja
Con un rectángulo de 940 x 05 píxeles , llenar # 28333C , vamos a crear una pequeña "caja":
Fig. 03 ­ Creación de la banda superiorPaso 4 ­ Creación Top ­ Barra de menús
Vamos a crear otro dimensiones del rectángulo de 940 x 30 píxeles con el mismo color de la raya y el
posicionamiento X e Y 40: 70 :

Fig. 04: Barra de menúsPaso 5 ­ Creación Top ­ Logo, alimentación y Twiter
Al darse cuenta de la descarga de logotipo y los iconos, se complementará la parte superior como se
muestra en las directrices de las siguientes figuras 5:06:

[Wpdm_file id = 11 title = "true"] [wpdm_file id = 12 title = "true"] (desarrollador, iconos secos )

Figura 05 :. Logotipo de Posicionamiento
Figura 06 :. iconos, RSS, y la parte superior enlaces TwiterVeamos los resultados hasta el momento:

Figura 07 :. resultado parcial de la parte superior compañía de tecnología de diseñoPaso 6 ­ Creación
Top ­ Barra de menús
Y completando la parte superior, utilizando el tipo de letra Arial Narrow tamaño 13 y color # D7E1E8, ,
posicionando a los artículos como en la siguiente imagen:

Fig. 08: Barra de menús ­ enlacesPaso 7 ­ Creación del Fondo
Pasemos ahora a la creación del fondo de la página. Hagamos un rectángulo con las dimensiones de
940 x 350 píxeles . A continuación, se aplica una barra de relleno con degradado (barras) con los
colores blanco y azul, como la imagen de abajo:
Figura 09 :. Creación del fondoPaso 8 ­ Inserción de imagen de Computadoras
De acuerdo con la imagen de abajo, después de que nos damos cuenta de la descarga de los
ordenadores, el posicionamiento de las coordenadas ­ X: 379 | Y: 71 . Y debe unirse con el lema de la
compañía: " Técnica Tecnología de la empresa WEB "

[Wpdm_file id = 10 title = "true"]
Fig. 10: Inserción del lema de la compañía e ilustrativaPaso 9 ­ Lista de servicios ­ TextosAhora vamos
a crear la lista de los servicios de la compañía, junto con sus botones e iconos.El posicionamiento de los
textos como la imagen de abajo:
Fig. 11: compañía de la lista de serviciosPaso 10 ­ Lista de servicios ­ IconAhora, vamos a crear iconos
para cada elemento de la lista.
En primer lugar, hacer un círculo en blanco y con las dimensiones de 14 x 14 píxeles . Después de una
estrella se convertirá en un triángulo de 7 x 6 píxeles .
Fig. 12: Icono de CreaciónPaso 11 ­ Lista de servicios ­ BotonesY para concluir esta sección, vamos a
crear el "Saber más ..." botón y "Compra Ya!"

Fig. 13: creación de botonesEl mismo proceso debe ser aplicado a la creación de otro botón.Veamos
los resultados hasta el momento:
Fig. 14: Creación de diseño de tecnología empresarial ­ Resultados de la 1ª mitadBueno, amigos
En el siguiente tutorial, vamos a completar el diseño .

Hasta allá.CarlosHPS Webdesigner 8)Webtutoriais: 1AE7E97B