Tutorial: Como deseñar unha páxina web con Adobe Photoshop

Existe unha enorme variedade de ferramentas para deseñar páxinas web e traballar dun xeito totalmente sinxelo e funcional sen introducir nin tocar código. Son innumerables, propostos polas aplicacións (Adobe Dreamweaver é un exemplo) ou directamente por plataformas en liña como Wix. Non obstante, para un deseñador web é esencial coñecer os procedementos manuais. HTML5 e CSS son os piares fundamentais para o deseño de sitios web e páxinas de destino.

Non obstante, con máis frecuencia do que podería esperar, terá que recorrer a aplicacións como Indesign ou Adobe Photoshop para complementar o seu traballo de deseño e darlles un acabado perfecto. Hoxe veremos neste extenso tutorial como podemos deseñar unha páxina web usando Adobe Photoshop. Nesta primeira parte seguiremos no traballo a desenvolver desde Photoshop, aínda que en próximas entregas veremos como podemos aplicar este traballo xa directamente en código HTML para facelo funcional.

Comezando polo deseño do noso wireframe

Para comezar co deseño e deseño dunha páxina web, é tremendamente importante que comecemos definindo cales serán os elementos básicos, este é o esqueleto. Esta estrutura servirá de soporte para manter todo o contido (xa sexa textual ou multimedia). Ao definir cada unha das seccións que compoñen a nosa páxina, poderemos traballar nelas con total precisión e proporcionar un deseño visual o máis exitoso posible.

É moi importante que teñamos en conta as dimensións que terá o noso sitio web, se terá un en caixa ou de ancho total. Unha páxina web en caixa estará dentro dun pequeno recipiente e, polo tanto, aparecerá un espazo ao seu redor. Pola contra, unha rede completa ocupará toda a pantalla do dispositivo que reproduce a páxina. Escoller entre unha ou outra modalidade responde a preguntas meramente estilísticas e tamén dependerá das necesidades do proxecto no que estamos a traballar. Traballaremos neste exemplo co modo caixón, polo que non ocupará todo o espazo proporcionado polo navegador.

 

Para crear o noso wireframe, o primeiro que temos que facer é entrar na aplicación Adobe Photoshop e incluír as dimensións que queremos que teña a nosa páxina. Neste exemplo a nosa páxina terá 1280 píxeles de ancho. Non obstante, o problema do tamaño pode variar dependendo do destino final ou do dispositivo no que queiramos reproducir a nosa páxina. Non hai dúbida de que un deseño web debe ser funcional e eficiente responsabilidade e debe adaptarse a todos os dispositivos do mercado. Non obstante, neste caso imos traballar para crear un prototipo que imos reproducir nun ordenador de sobremesa. Aínda así, o problema de resposta que trataremos máis adiante, por agora, aquí hai unha xerarquía de dimensións de pantalla para traballar neste exemplo. Teña presente que neste caso faremos un deseño da páxina de destino en Adobe Photoshop e despois migrarémolo a HTML5 E CSS3. O obxectivo desta pequena práctica é converter un deseño creado en Photoshop nun deseño web interactivo e utilizable que responda aos movementos do usuario.

Medidas para teléfonos móbiles

iPhone 4 e 4S: 320 x 480

iPhone 5 e 5S: 320 x 568

iPhone 6: 375 x 667

iPhone 6+: 414 x 736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360 x 640

HTC One: 360 x 640

Medidas de tabletas

iPad todos os modelos e iPad Mini: 1024 x 768

Galaxy Tab 2 e 3 (7.0 polgadas): 600 x 1024

Galaxy Tab 2 e 3 (10.1 polgadas): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Medidas para ordenadores de sobremesa

Pantallas pequenas (usadas por exemplo en netbooks): 1024 x 600

Pantallas medias: 1280 x 720/1280 x 800

Pantallas grandes: ancho superior a 1400 píxeles, exemplo 1400 x 900 ou 1600 x 1200.

 

Para comezar a distribuír os elementos e asignar seccións dentro da nosa maqueta web, é moi importante que teñamos en conta as proporcións para garantir un acabado lexible e melódico. Será esencial que uses as opcións de regras e guías que podes atopar no menú superior Ver. Para traballar de xeito proporcional e exacto, o mellor é que traballemos a partir de porcentaxes. Premeremos no menú de visualización e logo na opción «Nova guía» para escoller a modalidade da división. Neste caso faremos catro divisións verticais ao 25% e tomarémolas como referencia para colocar as imaxes no pé de páxina e a imaxe do noso logotipo na cabeceira.

Hai un código para designar cada unha das áreas que ocuparán a nosa modelo e a función que terá cada un deles. Por exemplo, para indicar a área que ocupará unha imaxe, crearemos rectángulos cunha especie de cruz. Para indicar que queremos incluír vídeos nunha área determinada, incluiremos o símbolo de reprodución dentro do noso contedor. Neste primeiro exemplo só imos traballar con imaxes, na captura superior pódese ver a área que ocupará o logo dende o noso sitio web.

Este sería o resultado final do noso wireframe. Como podemos ver, divídese nunha cabeceira composta pola imaxe na que se atopará o logotipo e que servirá de ligazón á páxina de inicio acompañada de dúas lapelas, un motor de busca e catro botóns no cadro de busca. Ademais, xa dentro do corpo, incluímos unha barra lateral composta por unha barra divisoria e unha serie de categorías que categorizan o tipo de contido que estará no noso sitio web. Outra sección cunha numeración que inclúe as entradas que existirán no noso sitio e, finalmente, unha lista coas metaetiquetas máis representativas do noso sitio.

Na área de contido, que será definida por unha sección que incluirá contido autoxestionable, atoparemos o contido dos nosos artigos. Neste caso, pan relado ou pan relado (que indica a estrutura orgánica do noso sitio web, o título do artigo, os metadatos, un parágrafo como un corpo de texto, dentro do cal se inclúe unha imaxe.

Como pé de páxina incluímos catro imaxes que servirán de ligazón a outras áreas da nosa páxina. Aquí podemos incluír logotipos ou outras seccións interesantes. Aínda que en realidade, esta área actuará máis como prefoot, xa que o pé de páxina irá un pouco máis abaixo coa política de uso, o aviso legal e os dereitos de autor.

Unha vez definida a estrutura básica ou o esqueleto da nosa páxina, teremos que pasar ao seguinte nivel. Isto consistirá no deseño axeitado de cada unha das áreas do noso sitio web. Noutras palabras, comezaremos a "encher" cada unha destas áreas co contido que finalmente se inserirá no noso sitio web. Recoméndase que non comecemos a deseñar estes elementos antes de traballar no wireframe porque é moi probable que se o facemos nesta orde, máis adiante teñamos que modificar as súas proporcións. Corremos o risco de distorsionar as nosas imaxes e ter que refacer o deseño de cada un dos elementos, o que se converterá nunha perda de tempo ou nun resultado de menor calidade.

Neste caso, o deseño do noso sitio web será extremadamente sinxelo. Usaremos o preceptos de deseño de materiais, xa que imos usar o logotipo de Google para exemplificar esta práctica. Debo aclarar que o obxectivo deste tutorial é ilustrar o coñecemento técnico, polo que o resultado estético neste caso é irrelevante. Como vedes, pouco a pouco fomos enchendo o espazo con todas as áreas que previamente determinamos no noso esquema. Non obstante, fixemos unha pequena modificación no último momento. Como xa observaches, reducimos moito o tamaño do noso logotipo e incluímos unha liña divisoria na zona inferior da cabeceira que se conecta perfectamente co menú superior. Neste caso empregamos botóns e materiais dun banco de recursos. Como deseñadores podemos deseñalos nós mesmos (especialmente esta opción recoméndase se queremos que presente un tónico moi similar ao que presenta a imaxe da marca ou o logotipo).

É importante que teñamos en conta que para expoñer este exemplo imos traballar en dous niveis diferentes. Por unha banda, traballaremos os obxectos e, por outra banda, o aspecto da páxina web. É dicir, por un lado no esqueleto da nosa páxina web e por outro lado en todos elementos flotantes que soportará este esqueleto. Comprenderás que hai áreas que non flotarán en absoluto, como a área que ocupará a barra lateral, o preefooter ou a barra divisoria que divide a cabeceira do corpo.

As estruturas 1, 2, 3 e 4 formarán parte do fondo da nosa páxina web, polo que en realidade non será necesario que exportemos como tal desde Adobe Photoshop, aínda que podemos facelo, non é necesario. Cando se trata de Cores planas (unha das características esenciais do deseño plano e do deseño de materiais, pódense aplicar perfectamente a través do código mediante unha folla de estilo CSS). Non obstante, o resto dos elementos deben gardarse para inserilos posteriormente no noso código HTML. Neste pequeno diagrama tamén reproducimos as áreas que pertencen ao fondo da páxina para que teñamos unha idea clara de cal será o aspecto final do noso sitio.

Como poderás entender, o sentido de crear este esquema en Adobe Photoshop é obter a dimensión real de cada elemento e aclarar a disposición e a estrutura de cada elemento. Por suposto, o contido textual non ten cabida nesta fase do proceso, xa que debe selo subministrado dende o noso editor de código. Tamén debemos sinalar que nesta práctica imos traballar con botóns e elementos estáticos, aínda que xeralmente aplícanse normalmente desde frameworks como Bootstrap ou directamente desde Jquery.

Unha vez creados cada un dos elementos que conformarán a nosa páxina web, é hora de comezar a exportalos e gardalos na carpeta de imaxes situada dentro da carpeta do proxecto HTML. É importante que te acostumes a exportar desde o teu wireframe, porque é moi probable que teñas que modificar algúns dos elementos orixinais en función da configuración do esqueleto. (Por exemplo, neste caso, cambiamos o tamaño dos botóns orixinais, o logotipo e a maioría dos elementos que forman parte da composición, incluídas as imaxes da zona inferior).

É importante que aprendamos a gardar calquera elemento de forma independente para gardalo coas dimensións que teñen e dun xeito preciso. Calquera erro, por pequeno que sexa, pode influír en todos os elementos que forman parte da súa páxina web. Ten en conta que estarán relacionados entre si e deben ter dimensións perfectas para que poidan introducirse desde HTML na web final. Neste caso, teremos que cortar e gardar de forma independente os seguintes elementos:

• O noso logotipo.
• Todos os botóns (os que forman parte do menú principal e o resto).
• Todas as imaxes.

Podemos facelo de moitas maneiras e quizais atopes unha alternativa máis eficaz para ti. Pero se é a primeira vez que fas este tipo de deseño, recoméndoche que sigas os seguintes consellos.

• Primeiro, debes ir ao cartafol onde se atopa o ficheiro PSD que contén o noso wireframe e duplicalo tantas veces como os elementos que vas exportar. Neste caso creamos 12 copias do orixinal e gardámolas no mesmo cartafol. A continuación, cambiará o nome de cada unha das copias e asignará a cada unha delas o nome do elemento que contén. As nosas 12 copias cambiarán o nome: Logotipo, botón de menú 1, botón de menú 2, barra de busca, botón superior 1, botón superior 2, botón superior 3 e botón superior 4. Os catro restantes cambiarán o nome como: Imaxe 1, Imaxe 2, Imaxe 3 e imaxe 4.
• Unha vez feito isto, abriremos o ficheiro co nome do logotipo.
• Iremos á nosa paleta de capas e localizaremos a capa que contén o noso logotipo. Despois presionaremos Ctrl / Cmd mentres facemos clic na miniatura da devandita capa. Deste xeito, o logotipo seleccionouse automaticamente.
• O seguinte paso será dicir a Photoshop que queremos que recorte ese logotipo dunha forma precisa. Para iso só teremos que facer unha chamada á ferramenta de recorte dende a tecla ou o comando C.
• Unha vez feito isto, faremos clic no botón Intro para confirmar o corte.
• Agora iremos ao menú Arquivo superior para facer clic en gardar como. Seleccionaremos o nome, que neste caso será «Logotipo» e asignarémoslle un formato PNG, por ser o ficheiro que ofrece a máis alta calidade na web.
• Repetiremos o proceso con todas as copias e os elementos. Cando recortes, asegúrate de que o resto das capas da nosa paleta estean invisible ou eliminado. Deste xeito podemos gardar cada elemento cun fondo transparente.

Neste caso, seleccionamos o botón de menú 2 da paleta de capas. Podes ver na captura de pantalla como se seleccionaron automaticamente os límites do noso botón.

Unha vez que seleccionamos a ferramenta de recorte da tecla C, o lenzo só se reduce ás dimensións do noso botón.

Agora é o momento de gardar un por un todos os elementos que forman parte do noso sitio web e incluílos na carpeta de imaxes e que usaremos máis adiante. Faremos chamadas dende o noso código e continuaremos co noso deseño, pero a partir de agora dende o noso editor de código.

Aínda que hai moitas ferramentas e alternativas para deseñar unha páxina web e que fan o proceso totalmente intuitivo, é moi importante que aprendamos a facelo nun manual. Deste xeito aprenderemos cales son os fundamentos detrás do deseño dunha páxina web.

Resumo:

1. Deseña o estrutura do sitio web prestando especial atención ao contido que desexa transmitir e ás seccións que debe crear no seu sitio web.
2. Traballa no teu esqueleto ou wireframe de Adobe Photoshop indicando en que áreas aparecerán os contidos e o seu formato.
3. Comezando a confiar nas medidas e marcas que xa desenvolveu deseño a superficie da rede. Inclúe todos os elementos (flotantes e fixos). Non esquezas incluír os botóns, o logotipo e as imaxes correspondentes.
4. Recortar un por un todos os elementos que forman parte do proxecto. Asegúrese de que teñen as medidas correctas e que non lle causarán problemas máis tarde.
5. Garda todos os elementos en formato PNG no cartafol de imaxes dentro do cartafol do proxecto HTML.
6. Teña presente que este proxecto terá unha saída na xanela web polo que é moi importante que teña en conta o modo de cor e aplique RGB.
7. Inspírate noutras páxinas web que admiras antes de comezar a traballar e non esquezas comentar isto cos membros do teu equipo. No caso de que sexa un proxecto para un cliente, intente seguir o instrucións na medida do posible.