Crear unha bandeira en Google Web Designer

Paso 1: Comezar

Google Web Designer é un ambiente de desenvolvemento gratuíto para os webmasters que proporcionan a capacidade de crear páxinas web, incluíndo elementos individuais como banners usando CSS3 e HTML5. Para usar esta ferramenta, en primeiro lugar, cómpre descargar o ficheiro de instalación do sitio web oficial e instalar.

Descarga Google Web Designer desde o sitio web oficial

Instalación do programa

1. Fai clic na ligazón presentada anteriormente para ir á páxina de agora e fai clic no botón "Descargar Web Designer". Teña en conta que o programa soporta só versións de Windows 7 e posteriores.



2. A través da ventá emerxente Gardar, seleccione un lugar no seu computador e use o botón marcado no panel inferior.



3. Ir ao cartafol con só gardar o ficheiro e facer dobre clic no botón esquerdo do rato para realizar a apertura. Como resultado, a xanela de instalación debe ser aberta.

   

   O procedemento de instalación en si realízase en modo totalmente automático, gardando todos os ficheiros de traballo ao directorio con outros programas no disco do sistema.

Autorización

1. Se desexa gardar proxectos en internet ou en xeral, cree unha bandeira específicamente para os servizos internos de Google, ademais merece a pena realizar a autorización. Para facelo, executa o programa usando a icona adecuada, pecha a xanela de benvida e faga clic no botón "Iniciar sesión" no panel superior.



2. Especifique os datos da conta de Google, faga clic en "Seguinte" e confirme se é necesario. Despois diso, a conta será engadida inmediatamente, sen necesidade de opcións individuais.

Cambiando a configuración

1. Comprendendo coa preparación, agora é desexable facer cambios na configuración básica do software para facilitar o traballo no futuro. Usando o panel superior, expandir o menú Editar e seleccionar "Configuración" ao final da lista.



2. Na pestana "Main", pode cambiar o comportamento inicial do programa para abrir rapidamente proxectos, asignar un cartafol para gardar os modelos creados, así como establecer valores por defecto para a especificación do anuncio ao crear.



3. A seguinte páxina "Modo de vista de deseño" contén os parámetros de aparencia do editor. Cambiando a configuración presentada, pode axustar os obxectos da grella e vinculante para posicionamento máis preciso dos elementos.



4. Google Web Designer ten un editor de código coa súa configuración. Así, na pestana "Visor de código", pode asignar o estilo de deseño, establecer os parámetros de formato e engadir ligazóns de teclas a tarefas.



5. A última pestana "estendida" contén só dous parámetros - "rexistro" e "escala de aplicacións". No primeiro caso, a inclusión creará un rexistro de cambio, mentres que o segundo elemento permítelle configurar unha nova escala estándar para a área de traballo do editor.

   Ten coidado! Se estableceu demasiada escala, pode aparecer problemas coa falta de espazo na pantalla para elementos importantes.

Calquera cambio feito de algunha maneira ou outro require un reinicio do programa. Se acaba de comezar a traballar co editor, non se esqueza da posibilidade de restablecer a configuración usando un elemento separado en cada unha das pestanas.

Paso 2: Crear unha bandeira

Ao configurar o programa, pode comezar a traballar no Banner usando todas as opcións para Google Web Designer. Non obstante, imos ter en conta que este remedio é exclusivamente como editor visual, o que lle permite publicar só elementos preparados que se crean por separado, por exemplo, en Photoshop.

Traballa con ferramentas

1. Despois de preparar o deseño, cómpre familiarizarse coas ferramentas. No panel superior da atención principal, a lista "Ver" merece, permitindo habilitar e desactivar os elementos auxiliares.



2. A través do menú "Window", pode desactivar temporalmente un elemento de interface particular. Por exemplo, se queres facer unha bandeira estática, a "timeline" só interferirá e, polo tanto, é mellor eliminar a marca apropiada.



3. As principais ferramentas de editor presentanse na columna esquerda. Non consideraremos cada opción, xa que non todos os elementos úsanse ao crear, con todo, recomendamos experimentar a si mesmo.



4. Xunto á barra de ferramentas preséntase "anuncios de anuncios" con varias contribucións. A atención especial merece "eventos" responsables da acción cun ou outro obxecto de banner e "CSS", onde se establecen os parámetros de estilo.



5. A parte dereita do programa tamén ten un conxunto de ferramentas que permite controlar a cor, o texto, a estrutura dos obxectos, as propiedades e simplemente as capas. Do mesmo xeito que o conxunto principal de funcións, as fiestras son mellores para estudar de forma independente no proceso de creación dun proxecto.



6. Se é necesario, usar a "liña de tempo" pódese crear unha bandeira animada. Ao mesmo tempo, para xestionar a área principal do editor, use un espazo de apertura e LCM, así como un bloque con parámetros de escala.

Enchendo un esquema

1. Crear un banner sempre comeza co fondo e, polo tanto, despois de preparar un deseño, abra a pestana "Propiedades" e no bloque de páxina, use a subsección "Encha". É moi posible instalar calquera cor, incluíndo un gradiente ou un fondo totalmente transparente.



2. Ademais da cola, engade elementos gráficos preparados con antelación. Podes facelo na pestana da biblioteca de obxectos facendo clic na icona "+" no panel inferior.



3. Seleccione os ficheiros gráficos desexados e faga clic en Abrir. Isto pódese facer tanto á vez para todas as capas necesarias e por separado, repetindo estas accións.



4. Para acomodar, abrazar a imaxe desexada na pestana da biblioteca de obxectos e arrastrar ao editor á área principal.

   

   Pode controlar a localización do obxecto con arrastre e escalar habitual cunha ferramenta de selección activa. Se é necesario, sempre pode usar guías.



5. Ao seleccionar un ficheiro gráfico no espazo de traballo ou no separador do editor estrutural, abra as "propiedades". Hai moito máis que máis posibilidades que no caso do fondo, por exemplo, axustes de fronteira ou sangrías.



6. Se o deseño da bandeira prevé a presenza de texto, pode engadir o elemento axeitado usando a ferramenta estándar de Google Web Designer. Prema na icona "T" no panel esquerdo, faga clic na xanela do editor principal e introduza o conxunto desexado de caracteres.

   

   Para controlar o texto, seleccione a capa na pestana "Editor estrutural", amplíe o "texto" e axusta os parámetros apropiados.

Configurando a animación

1. No bloque "Timeline", pode engadir e configurar os efectos da animación. Para comezar, faga clic no botón "Engadir icona" coa icona "+".



2. Fai clic na icona ".5S" entre os cadros e configure os parámetros que necesitas. Por exemplo, pode cambiar a duración e estilo da transición.



3. Cada bloque individual sobre a "liña de tempo" é completamente independente doutros. Para crear animacións, cambie algúns elementos á súa discreción e comprobe o resultado usando o botón de reprodución.

   

   Despois de completar o proceso de edición, use o botón de repetición. Isto creará unha animación interminable.

Engadindo eventos

1. Tendo entendido co deseño, cómpre engadir eventos de transición para elementos individuais ou a toda a bandeira no seu conxunto. Para facelo, na columna do inspector do sector, abra a pestana Eventos e faga clic na icona "+" no panel inferior.



2. Na xanela que se abre desde a lista de "propósito", seleccione un obxecto que será referenciado.



3. Na páxina de eventos, expandir a páxina "Mouse" e seleccionar "Prema". Dependendo dos requisitos do resultado, pode combinar diferentes instalacións.



4. Ademais da lista de "acción", abra a Declaración de Google e configure o valor "transición". Tal elección fará que o usuario pase á páxina específica que necesita en Internet.



5. Como un "destinatario", seleccione unha versión "GWD-AD".



6. Na última etapa do campo "Identif. Indicadores »Comprobe a ligazón ao atallo e enche" URL "especificando a páxina desexada. Use "Aceptar" para gardar.

Traballa con código fonte

1. Como mencionamos, Google Web Designer contén un editor de código integrado. Pódese activar usando o botón "código" no lado dereito do panel superior.



2. Pode facer cambios na estrutura de banner usando non só o editor visual, senón tamén traballar directamente co código do ficheiro do proxecto. Isto pode ser moi útil ao aliñar unha multitude de pequenos elementos ou engadir eventos que non proporcionan o programa.

As accións descritas deben ser bastante suficientemente para crear unha bandeira, independentemente da aplicación. Ao mesmo tempo, pode expandir significativamente as capacidades combinando estas ferramentas.

Paso 3: Completación

Cando a bandeira está rematada e listo para a colocación no sitio, pode ir ao último paso. Primeiro de todo, vale a pena comprobar como se ve o seu traballo na páxina web real.

Preview.

1. No panel superior, faga clic no botón Vista previa para abrir o menú adicional. Aquí pode especificar o navegador co que se abrirá a bandeira.



2. Ao abrir todas as funcións e a aparencia do banner está preservada, pero con algunhas características. Por exemplo, mesmo se instalou unha repetición infinita da animación, todo estará limitado aquí só unha iteración.



3. Se é necesario, sempre pode demostrar o resultado a outras persoas. Para iso, seleccione "Obter unha ligazón compartida" e confirmar o acceso á conta de Google.

   

   Como resultado, aparecerá unha ligazón na pantalla para ver a bandeira de tal modo como se describe anteriormente. Por suposto, só é posible se ten unha conta.

Preservación e publicación

1. Para gardar o proxecto, primeiro abra o menú Ficheiro e usa a opción Gardar. Despois diso, o ficheiro de orixe será gardado na computadora e pódese abrir posteriormente.



2. Pode preparar un proxecto para colocar no sitio abrindo o menú "Publicar" na esquina superior dereita do programa e seleccionando unha das localizacións do Gardar.



3. Cambia os parámetros na xanela de publicación á túa discreción, deixando só as caixas de verificación desexadas e fai clic en "Publicar". O aforro acontece así con independencia do tamaño do proxecto.

   

   Como resultado, o cartafol pódese atopar no lugar de Gardar. A colocación da bandeira do sitio difire na dependencia do sitio e en xeral xa non pertence ao procedemento de creación.