Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvida export HTML e CSS

Boa noite Leonardo Tudo bom. Por um acaso nesse curso você ensina a exportar a página para Html e Css. Estou querendo entender como se faz isso pra ver se tudo vem implementado como inputs divs e etc.

Caso não seja abordado nesse curso se tiver algum outro que fala sobre isso ficarei grato.

4 respostas
solução!

Gabriel, boa tarde.

O Illustrator por si só não gera os códigos identificando os elementos como no seu layout, ele não vai saber o que é uma div, o que é um input, etc. O máximo que você consegue fazer é marcar onde seu layout deverá ser "fatiado" com a Slice Tool (shift + k), assim ele vai separar por blocos mas fará o uso de imagens para interpretar aquilo. Feito isso, você vai pedir para Salvar para Web e antes de dar o "Ok" final para ele salvar as imagens, vc tem um link de "Preview"; dando o preview, ele vai gerar um html e renderizar no browser... no seu próprio browser vc pode pedir para ele salvar aquela página gerada, aí vc terá um HTML com aquilo.

Está longe de ser uma boca prática, ele gera css's básicos só para interpretar no navegador aquilo que estava na artboard, e o html não vai além de uma <div>. Até onde eu sei, é o máximo que o Illustrator consegue fazer.

Agora você pode testar alguns plugins externos para o AI que talvez consigam ir um pouco mais além, mas nunca testei para te falar. Um exemplo é o http://ai2html.org.

Abraço

Entendi ..... E o photoshop não da pra fazer isso?

Gabriel, o Photoshop também não é a ferramenta ideal, ele trabalha mais ou menos da mesma forma que o Illustrator nesse caso.

Na Alura tem uma sequência de cursos que vai te ajudar rapidinho a resolver esse problema, e da melhor forma! Se você já fez os de design, já sabe criar os layouts nos softwares, aproveita que já é aluno e dá explorada nos cursos de front-end.

Fazendo os 2 primeiros cursos da Carreira Desenvolvedor Front-end, você já vai conseguir passar para HTML e CSS seus layouts e fazer mais coisas ainda! E melhor.. usando boas práticas!

Segue o link se quiser dar uma olhada: https://www.alura.com.br/carreira-desenvolvedor-front-end

Abraço

Opa Thiago Vilaça eu pensei apenas nessa possibilidade de estudar as ferramentas como aprendizado para o css, acreditava que a ferramenta poderia me gerar css diferenciado assim como a estrutura do html.

Eu prefiro fazer na mão seria mais para ver se tem algo novo a ser usado como ferramenta. Abraço Gabriel.