 Home (http://www.carloshps.com.br/blog) / Downloads (http://www.carloshps.com.

br/blog/downloads-gratis/)
/ Como Criar uma Capa de Revista com o Fireworks CS5

Breakdancing

Crece - tu Negocio con YouTube

Anúncios Google   ► Adobe fireworks   ► Criar revista   ► Revista veja capa   ► Download adobe

COMO CRIAR UMA CAPA DE REVISTA COM

O FIREWORKS CS5
 10/06/10

 4 COMMENTS (HTTP://WWW.CARLOSHPS.COM.BR/BLOG/COMO-CRIAR-UMA-CAPA-DE-REVISTA-COM-O-
FIREWORKS-CS5/#COMMENTS)

 IN : DOWNLOADS (HTTP://WWW.CARLOSHPS.COM.BR/BLOG/DOWNLOADS-GRATIS/) , FIREWORKS

(HTTP://WWW.CARLOSHPS.COM.BR/BLOG/WEB-DESIGN/FIREWORKS/) , PSD & PNG
(HTTP://WWW.CARLOSHPS.COM.BR/BLOG/DOWNLOADS-GRATIS/PSD-PNG/) , TUTORIAIS
(HTTP://WWW.CARLOSHPS.COM.BR/BLOG/TUTORIAIS/) , WEB DESIGN
(HTTP://WWW.CARLOSHPS.COM.BR/BLOG/WEB-DESIGN/)

 0

(http://www.carloshps.com.br/blog/como-criar-uma-capa-de-revista-com-o-㜀㌀reworks-cs5/)

Como Criar uma Capa de Revista com o

Fireworks CS5
Olá, Fireworkseiros de plantão!

Neste tutorial, mostrarei como criar uma capa Top 30 Juegos

de revista com o nosso velho, versátil e
poderoso Fireworks.
Online
Pré-Requisitos Juegos Online - Juego Gratis
Facilidade quanto ao manuseio do
Top 30 Juego Online 2016
Adobe Fireworks CS3 / CS4 / CS5

Download das fontes: Harabara

(http://www.dafont.com/harabara.font) /
Amerika Sans
(http://www.dafont.com/harabara.font) /
Paskowy (http://www.dafont.com/harabara.font)

Download das imagens: Orange Tunnel (http://www.dafont.com/harabara.font) /Textura

(http://www.dafont.com/harabara.font)/ Hands 2:OK (http://www.dafont.com/harabara.font)

Objetivo
Criar uma capa de revista utilizando o Fireworks CS5

Conteúdo
1º Passo – Deónir as Conógurações do Documento
Vamos criar um novo documento com as dimensões de uma revista real, mais ou menos, do tamanho de
um papel A4 (21.0 x 29.7 cm).
 Fig. 01: Conóguração do documento

Perceba que, em pixel o documento 㜀㌀ca enorme. Então, para efeito deste tutorial, diminuirei a imagem
em 4 vezes, 㜀㌀cando com as dimensões 620 x 894 pixel.

Outro detalhe é quanto à resolução. Como será um arquivo que será impresso, utilizaremos a resolução
300 pixel/Inch (quanto maior o valor, melhor a qualidade para a impressão). Se fosse um arquivo
especí㜀㌀co para a web, deixaríamos para 72 pixel/Inch.

2º Passo – Inserindo as Linhas de Corte

Para quem trabalha com o Indesign, Corel, PageMaker e outros editores grá㜀㌀cos voltados para
impressão, sabem bem mais que eu, da importância das linhas de corte, também chamadas de “sangria”
(se eu tiver errado, por favor, me corrijam ;)). A grosso modo, é onde a arte será cortada pela lâmina da
máquina da grá㜀㌀ca.

Isso signi㜀㌀ca que, dentro desta área é o que temos certeza que será impresso, tudo bem?

Para isso, vamos utilizar as linhas-guias. Lembrando que as réguas devem estar visíveis (Ctrl + Alt + R ou
menu View > Rulles).
 Fig. 02: Linhas-guia

Vamos colocar as linhas com a distância de 20 pixel que equivale a 7 mm, em todos os lados.

Primeiro, clique sobre a régua, segure e arraste para a área do desenho e depois, solte. Faça isso duas
vezes na horizontal e na vertical.

As posições serão no eixo X: 20px e 600px | eixo Y: 20px e 874px.

Caso tenha di㜀㌀culdade, basta inserir as guias e dar dois cliques sobre cada uma delas, determinando em
seguida, seu posicionamento.

Fig. 03: Posicionamento das guias

3º Passo – Organizar Camadas (Layers)

Bom, particularmente, gosto de deixar todos os layers organizados, pois nunca se sabe se você irá
compartilhar com alguém este trabalho ou, até mesmo, fazer uma atualização. Isso porque, 㜀㌀ca bem
mais fácil e rápido de encontrar todos os elementos do desenho.
Então, inicialmente, dividi o projeto em 3 partes: topo, conteúdo e rodapé.

Então, vamos criar as pastas como na imagem.

Fig. 04: Organização dos layers

Se por ventura, necessitemos de mais algumas, sem problemas – basta inserirmos nos devidos lugares.

4º Passo – Topo: Background

Vamos criar um fundo para o topo e prepará-lo para receber o logotipo da revista, a machete e os dados
da edição, etc.

Criemos então, um retângulo nas dimensões 620 x 175 px, com preenchimento #212121. Como efeito
gradiente, coloquemos o seguinte:
 (http://www.carloshps.com.br/blog/wp-content/uploads/2012/10/㜀㌀g06-gradiente.png)
Fig. 05: Efeito gradiente no topo

5º Passo – Topo: Logotipo + Textos Adicionais

Vamos ver como é simples criar um logotipo para nossa revista utilizando apenas uma combinação de
fontes, cores e posicionamentos.

(http://www.carloshps.com.br/blog/wp-content/uploads/2012/10/㜀㌀g05-logotipo-titulo-revista.png)
Fig. 06: Criação do logotipo da revista

Simples, não?

E, complementando com a edição e endereço do site da revista, teremos, até aqui, o nosso topo
prontinho:
 Fig. 07: Resultado ónal do topo

6º Passo – Criando o Background da Revista

Criemos agora um retângulo com as dimensões 620 x 620 pixel e apliquemos o seguinte efeito:

Fig. 08: Backgorund, primeira camada.

Em seguida, insiramos a imagem Orange Tunnel (http://www.dafont.com/harabara.font) sobre este

retângulo verde (diminuí o tamanho em 50%) e apliquemos o 㜀㌀ltro Stamp.
 Fig. 09: Background, segunda camada.

E para arrematarmos o fundo da capa, aplicaremos uma textura (http://www.dafont.com/harabara.font).

Fig. 10: Background, terceira camada.

E o nosso resultado até aqui é este:

(http://www.carloshps.com.br/blog/)

Home  (http://www.carloshps.com.br/blog)

Downloads  (http://www.carloshps.com.br/blog/downloads-gratis/)

Freelancer  (http://www.carloshps.com.br/blog/freelancer/)

Web Design  (http://www.carloshps.com.br/blog/web-design/)

Fig. 11: Resultado parcial do background da revista

Front End  (http://www.carloshps.com.br/blog/front-end/)

7º Passo – Inserir a Imagem de Capa

Nossa imagem principal, a que será destaque em nossa capa, será a Hand 2
(http://www.dafont.com/harabara.font).
WordPress O detalhe aqui é que colocaremos nas pastas da camada TOPO,
 (http://www.carloshps.com.br/blog/wordpress/)
ok?!


Vamos retirar o fundo branco da imagem para encaixá-la melhor na capa.

Existem várias técnicas, mas vamos usar a mais rápida delas, apesar de não ser tão precisa.
 (http://hotmart.net.br/show.html?a=J3946593G)

Com a varinha mágica (Magic Wand tool), con㜀㌀guremos como na imagem abaixo e, em seguida,
devemos clicar no fundo branco e, pelo teclado, DELETE para excluir o fundo.

Fig. 12: Retirando fundo com Magic Wand (Varinha Mágica)

Reparemos que existe uma área a ser editada ainda. Para isso, usando as con㜀㌀gurações da Borracha
(Eraser), removemos isso facilmente:
 Fig. 13: Retirando as sobras com Eraser tool

E o resultado da inserção e tratamento da imagem, deve 㜀㌀car assim:

(http://www.carloshps.com.br/blog/wp-content/uploads/2012/10/㜀㌀g14-resultado-parcial.jpg)
Fig. 14: Resultado parcial da capa

8º Passo – Inserir Manchete da Capa

8º Passo – Inserir Manchete da Capa
Como sabemos, toda capa de revista, jornal, livro tem uma chamada principal, um texto que dá destaque
ao principal assunto a ser tratado naquela edição. É o que os jornalistas chamam de MANCHETE.

Então, vamos à ela:

Fig. 15: Inserção da manchete de capa

9º Passo – Inserir os textos secundários

E, para complementar a nossa capa de revista, outros temas em destaque, com menor ênfase que a
manchete, também comporão nossa arte grá㜀㌀ca.
 (http://www.carloshps.com.br/blog/wp-content/uploads/2012/10/㜀㌀g16-textos-secundarios.jpg)
Fig. 16: Inserção dos textos secundários

10º Passo – Rodapé

E, para 㜀㌀nalizarmos, vamos completar o rodapé da revista. Neste caso, colocaremos alguns logotipos e o
código de barras.

(http://www.carloshps.com.br/blog/wp-content/uploads/2012/10/㜀㌀g17-rodape.jpg)
Fig. 17: Rodapé da revista

Pronto!

E eis o resultado 㜀㌀nal:

 (http://www.carloshps.com.br/blog/wp-
content/uploads/2012/10/Capa-de-Revista-CarlosHPS-Blog.jpg)
Resultado Final do Tutorial Como Criar uma Capa de Revista com o Fireworks

Download
[wpdm_㜀㌀le id=31 title=”true” desc=”true” ]
É isso aí, até a próxima.

CarlosHPS Webdesigner 8)
Webtutoriais:1218EA5C

Facebook
(http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.carloshps.com.br%2Fblog%2Fcomo-
cs5%2F&t=Como%20Criar%20uma%20Capa%20de%20Revista%20com%20o%20Fireworks%20CS5)
criar-uma-capa-de-revista-com-o-㜀㌀reworks-

Twitter
text=Como%20Criar%20uma%20Capa%20de%20Revista%20com%20o%20Fireworks%20CS5&url=http%3A%2F%2F
criar-uma-capa-de-revista-com-o-㜀㌀reworks-cs5%2F&via=carloshps)
(http://twitter.com/share?

Google+
(https://plus.google.com/share?url=http%3A%2F%2Fwww.carloshps.com.br%2Fblog%2Fcomo-criar-
cs5%2F&t=Como%20Criar%20uma%20Capa%20de%20Revista%20com%20o%20Fireworks%20CS5)
uma-capa-de-revista-com-o-㜀㌀reworks-

Pinterest

LinkedIn
cs5%2F&title=Como%20Criar%20uma%20Capa%20de%20Revista%20com%20o%20Fireworks%20CS5)
mini=true&url=http%3A%2F%2Fwww.carloshps.com.br%2Fblog%2Fcomo-criar-uma-capa-de-revista-
(http://www.linkedin.com/shareArticle?
com-o-㜀㌀reworks-

StumbleUpon
cs5%2F&title=Como%20Criar%20uma%20Capa%20de%20Revista%20com%20o%20Fireworks%20CS5)
(http://www.stumbleupon.com/badge?url=http%3A%2F%2Fwww.carloshps.com.br%2Fblog%2Fcomo-
criar-uma-capa-de-revista-com-o-㜀㌀reworks-


 Gostou desta postagem?
Então, inscreva-se GRÁTIS e receba todas as novidades e atualizações do CarlosHPS Blog.

Nome E-mail CADASTRAR!

Qualquer dúvida, acesse a nossa política de privacidade do CarlosHPS Blog.

 770 VIEWS  SHARE THIS

 Capa De Revista (Http://Www.Carloshps.Com.Br/Blog/Tag/Capa-De-Revista/) , Criar Capa

(Http://Www.Carloshps.Com.Br/Blog/Tag/Criar-Capa/) , Fireworks
(Http://Www.Carloshps.Com.Br/Blog/Tag/Fireworks/)

Anúncios Google   ► Download adobe   ► Remove background   ► Photoshop cs6   ► Gráfica revista

PREVIOUS ARTICLE
COMO CRIAR UM BACKGROUND PARA O TWITTER (HTTP://WWW.CARLOSHPS.COM.BR/BLOG/COMO-
CRIAR-UM-BACKGROUND-PARA-O-TWITTER/)
 NEXT ARTICLE
TEMAS PROFISSIONAIS PARA WORDPRESS #1 (HTTP://WWW.CARLOSHPS.COM.BR/BLOG/TEMAS-
PROFISSIONAIS-PARA-WORDPRESS-1/)

 Related Posts  ()  ()

(http://www.carloshps.com.br/blog/criar-um-site-responsivo-com-html5-e-css3-parte-3-de-3/)

(http://www.carloshps.com.br/blog/wp-

Criar um Site Responsivo com HTML5 (http://www.carloshps.com.br/blog/criar-um-site-

responsivo-com-html5-e-css3-parte-3-de-3/)
 13/05/14
 61 Comments (http://www.carloshps.com.br/blog/criar-um-site-responsivo-com-html5-e-css3-parte-3-de-
content/uploads/2014/05/como-criar-site-responsivo-com-html5-css3-parte-㜀㌀nal.jpg)

 Comments ( 4 )

NELITO ZANGUI

15 DE OUTUBRO DE 2012 AT 10:00

REPLY (HTTP://WWW.CARLOSHPS.COM.BR/BLOG/COMO-CRIAR-UMA-CAPA-DE-
REVISTA-COM-O-FIREWORKS-CS5/?REPLYTOCOM=1282#RESPOND)

Muito bom mesmo. Acredito que irá ajudar muito boa gente a desenvolver habilidades no
trato com o 㜀㌀reworks.

CARLOSHPS WEBDESIGNER
 15 DE OUTUBRO DE 2012 AT 19:25

REPLY (HTTP://WWW.CARLOSHPS.COM.BR/BLOG/COMO-CRIAR-
UMA-CAPA-DE-REVISTA-COM-O-FIREWORKS-CS5/?
REPLYTOCOM=1284#RESPOND)

Olá, Nelito
Esta é mais uma faceta desta ferramenta que eu sou apaixonado.
Grande abraço.
CarlosHPS Webdesigner 8)

HILDO ANTÔNIO

7 DE NOVEMBRO DE 2012 AT 15:29

REPLY (HTTP://WWW.CARLOSHPS.COM.BR/BLOG/COMO-CRIAR-UMA-CAPA-DE-
REVISTA-COM-O-FIREWORKS-CS5/?REPLYTOCOM=1293#RESPOND)

Muito boa as explicações, ensina de verdade, nos traz uma outra visão do programa
Fireworks.

WELLINGTON

13 DE MAIO DE 2015 AT 16:29

REPLY (HTTP://WWW.CARLOSHPS.COM.BR/BLOG/COMO-CRIAR-UMA-CAPA-DE-
REVISTA-COM-O-FIREWORKS-CS5/?REPLYTOCOM=12034#RESPOND)

Muito bom !! ao contrário do que muitos pensam o 㜀㌀reworks pode ser usado sim para
impressos grá㜀㌀cos , bastando utilizar as con㜀㌀gurações corretas como resolução e cores
CMYK. Eu particularmente pre㜀㌀ro o 㜀㌀reworks cs5 por ser leve e muito fácil de utilizar o
illustrator eu achei muito pesado para rodar e é difícil na hora de fazer tratamento com
fotos.
  Leave a reply

 YOUR NAME

 EMAIL

 URL

 CAPTCHA

Click on image to update the captcha .

 COMMENT

POST COMMENT

Anúncios Google   ► Criar logotipos   ► Fazer revista   ► Html5 tutorial   ► Cs4 tutorial

(http://www.hostgator.com.br/5765-4-1-21.html)
Copyright 2007-2016 CarlosHPS Webdesigner | Quer um template como este? (http://themeforest.net/item/logger-

magazinepersonal-blogging-theme/9447207?ref=CarlosHPS) | CarlosHPS (\"http://www.carloshps.com.br\")

        