Como faço para postar um site desenvolvido no Illustrator?

Barbosa Marques · 15 de fevereiro de 2018

Olá Comunidade, estou com um site feito por terceiros no Illustrator, quando coloco para exportar em .htlm abra uma pagina em formato .png. segue as informações mostradas no final do site.

Formato: PNG-24

Dimensões: 1365w x 3158h

Tamanho: 3,993 M

Configurações: Não entrelaçado, Transparência ativado

<html> <head> <title>scritta site 3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <img src="scritta-site.png" width="1365" height="3158" alt=""> </body> </html>

Gostaria de saber o que preciso fazer para transforma isso em .html para ser postado no servidor da RedeHost onde tenho uma conta. Desde já agradeço galera.

navegantenarede · 15 de fevereiro de 2018

A função de exportar em HTML foi descontinuada no Adobe Illustrator a partir da versão CS6/CC, se você tem a versão CS5 ou anterior, provavelmente você deve conseguir exportar em HTML. Depoois de exportar, basta mover os arquivos HTML para a pasta public_html na hospedagem da RedeHost.

Para layout/web design, a comunidade da Adobe parece sugerir o Adobe Muse como alternativa.

Você também pode tentar usar um script como o ai2html para fazer a conversão, veja as instruções no site para a instalação.

DiF · 16 de fevereiro de 2018

@Barbosa Marques @navegantenarede Basicamente o que temos ali é um "landing" que é o site ilustrado.

Seria como um Guia de referência para o Coder fazer a codificação do layout.

Ou seja, em outras palavras, você não transforma ou exporta o que está desenhado, mas sim, usa ele como referência para desenvolver o layout com a estrutura HTML.

Nesse caso, você precisa ter pelo menos o domínio do HTML e CSS para recriar as imagens em forma de elementos.

Olhando para o landing, podemos perceber que há 6 setores ali.

1 - Cabeçalho

2- Foto

3 - Conteúdo

4- mais fotos

5- mapa

6 rodapé

Você pode dividir eles usando o elemento <div> ou <section>

PS: exportando para html, ele simplesmente pega as imagens e fatia elas e monta como se fosse um mosaico. Por isso que não se deve usar o exportar, mas sim recriar com elementos. Usar imagens somente onde for imagens.