RHOdesign Blog | Webdesign

Posts Tagged ‘Tutorial

Você já se perguntou algumas vezes sobre fechamento de arquivo para impressão em gráfica, no Adobe Illustrator, certo?!

Você também já teve dúvidas sobre como inserir marcas de corte e dobra no arquivo para impressão, correto?

Então, não deixe de assistir esse VÍDEO TUTORIAL EM PORTUGUÊS de nosso grande designer e professor João Faraco!

Tutorial em português: Fechamento de arquivo no Illustrator

Vídeos do VodPod não estão mais disponíveis.

João Faraco é designer gráfico formado na ESPM-RJ, atualmente trabalhando na PVDI Design. Em seu site/blog são postados tutoriais em vídeo para os programas que mais usa: Adobe Illustrator, Photoshop e Flash. Veja o site: http://joaofaraco.com.br/

Anúncios

Um dos truques mais úteis e legais que um desenvolvedor web pode aprender é usar DIVs expansíveis, também conhecidas como collapsible DIVs.

Esse efeito dá ao usuário a possibilidade de expor na página somente o conteúdo que ele quer ver naquele momento. Se eles estiverem interessados em ver os detalhes desse conteúdo, podem clicar em um link ou imagem e a página cresce dinamicamente para mostrar o conteúdo que ali estava “escondido”.

Vamos a prática!

1. Abra seu editor de html e cole o seguinte código em sua nova página, dentro da body:

<a href="javascript:;" onmousedown="toggleDiv('minha-div-1');">
Toggle Div 1 Visibility</a>
<div id="minha-div-1" style="display:none">
<h3>This is a test!<br>Can you see me?</h3>
</div>
<br />
<a href="javascript:;" onmousedown="toggleDiv('minha-div-2');">
Toggle Div 2 Visibility</a>
<div id="minha-div-2" style="display:none">
<h3>This is a test!<br>Can you see me?</h3>
</div>

2. Agora insira dentro da tag HEAD o seguinte javascript:

<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>

3. Publique a página e veja que está tudo funcionando.

Agora basta mudar o conteúdo para o que você deseja mostrar e inserir um pouco de CSS para deixar a formatação mais bonita.

Abaixo, falarei de um código simples em javascript muito utilizado para chamar páginas “index” diferentes, quando identificada a resolução do monitor.

Como exemplo, crie 3 páginas homes nos diferentes tamanhos, uma ajustada para 1024×768, outra para 800×600 e uma para servir de página mestra.

Salve-as como:

index.html (mestra)
index_1024x768.html (layout ajustado para 1024×768)
index_800x600.html (layout ajustado para 800×600)

Abra o código HTML da página mestra e insira este código logo abaixo do head:

<script language="JavaScript">
function resolucao_img_sk(){
if (screen.width == "800" && screen.height == "600"){
window.location.href="index_800x600.html";
}
if (screen.width == "1024" && screen.height == "768"){
window.location.href="index_1024x768.html";
}
}
resolucao_img_sk();
</script>

A partir desse código, você poderá modificar o script para abir páginas de outras resoluções. Basta adicionar mais “IFs” e criar novas páginas na resolução desejada.

Abaixo vou explicar como criar um CD auto-executável muito utilizado para apresentações em flash. É muito simples!

No primeiro frame do arquivo da animação finalizada em flash você insere o seguinte comando:

fscommand("fullscreen", true);

Salve o arquivo e publique da seguinte forma:

Clique em File > Publish Settings e na aba Formatos habilite a opção Windows Projector(.exe). Clique em Publicar.
Será criado um arquivo executável com a sua animação feita em flash.

A partir disso, para carregar automaticamente a animação quando o CD for inserido, você deverá criar uma arquivo chamado autorun.inf, com alguns códigos, e colocá-lo na raiz do cd com os seguintes dados.

Para criar o arquivo autorun.inf, que abrirá o executável do CD automaticamente, siga os passos:

1. Abra o bloco de notas do windows.
2. Escreva o seguinte código no arquivo em branco:

[Autorun]
OPEN=arquivo.exe

3. Salve o arquivo como autorun.inf

Agora, basta gravar no CD/DVD os arquivos autorun.inf e o arquivo .EXE do executável criado. Simples!

Tutorial de photoshop‘, ‘webdesign tutorials‘ e “daily art inspiration‘ são keyphrases muito utilizada nos sites de buscas.

Porém, em meio a tantos milhões de sites, é difícil fazer uma filtragem dos melhores, ou até mesmo daqueles que possueam ATUALIZAÇÕES DIÁRIAS de tutoriais, pricipalmente aqueles que são gratuitos.

Abaixo segue uma lista dos Sites de Tutoriais e Inspiração que acampanho diariamente em busca de novidades e aperfeiçoamento profissional:

Lista de Sites de Art, CSS e Flash Inspiration:

Esses são apenas alguns exemplos de sites da minha lista de mais de 20 sites que abrem automaticamente quando inicio meu firefox! 🙂

Texto extraído de: http://www.badboy.ro/

If vertical align is a snap using tables, it can prove quite troublesome with CSS layouts. But you shouldn’t let such a small thing discourage you. I, for one, don’t like to see a perfectly valid CSS layout mingled with some tables just for this purpose. So, if you want to know how you can achieve vertical-align functionality the right way, read on.

Primeira Opção — One line vertical-align:middle

Esse é muito simples. Você inseriu um texto dentro de um container (uma div, um parágrafo, um cabeçalho… etc) e esse texto ficou automaticamente alinhado no topo, certo? Para alinhar o texto centralizado na vertical, basta dizer no CSS que a “line-height” do seu texto deve ter a mesma altura especificada para o container e colocar “vertical-align:middle” nesse texto também.

Ou seja, em outras palavras:
se o seu texto está inserido em um <p class=”texto”> que está dentro de uma <div id=”container”> que tem 100px de altura, você estipulará:
#container {… … height: 100px; …}
.texto {… line-height:100px; vertical-align:middle; … }

See a full working example.

Step 2 — Multiple lines (one line) vertical-align:bottom

An absolute positioned div inside a relative positioned one can basically be placed anywhere you want inside the parent div. So we’ll just use this setup and absolute position a div with bottom:0 within a relative positioned one. The relative positioned div inherits its height from its parent.

See a full working example.

Step 3 — Multiple lines vertical-align:middle

This must be the trickiest part of the vertical-align functionality to be achieved with CSS. If we were to just use the trick from Step2 and set the absolutely aligned div to top:50% or bottom:50%, this would align the top part of the text (or its baseline) at the middle — so its not really middle vertically aligned. We could use the actual vertical-align property but it only works for inline elements, so we should use display:table and display:table-cell for the enclosing divs.

All nice and easy but for one problem: IE — it doesn’t recognize display:table. Nevertheless that shouldn’t stop us. We’ll use this setup and achieve the desired result even though only for last-generation browsers.

So, how can we trick IE in vertically aligning the text? We’ll use its bugs against it. IE has some issues with rendering relative and absolute positioned elements. I won’t go into details on this specific bug right here as I don’t want to complicate things even more. The important thing to remember is the solution to this practical problem: positioning a relative div into an absolute one into a relative one once again. Weird, huh? Let me try and explain a bit better: we already have the relative positioned container from the last setup where we want to vertically align the text. Inside it we’ll place an absolute positioned div at top:50%, and inside this one another div relatively positioned at top:-50%. Ta da! It works even for IE.

So now, let’s combine the two solutions and create one that works on every browser. We’ll use the attributes for the modern browsers in a way that IE can’t read them (with some help from the direct child selector), and then, also add the code for IE.

See a full working example.

That’s it. Have fun working with vertical align and CSS layouts, and always remember: there’s not been yet a layout that couldn’t be coded with CSS.

O efeito a seguir mostrará como transformar uma foto em um desenho (contorno preto e branco).
Abaixo, podemos ver como ficará o resultado final.

Foto transformada em desenho

Vamos ao tutorial:

1. Abra sua imagem no photoshop.

2. Transforme sua imagem em PB, usando o atalho CTRL+SHIFT+U [ou Image> Ajustments> Desarute]

3. Duplique a a Camada que você desaturou [Ctrl + J]

4. Inverta as Cores da Camada Duplicada. [Ctrl+I] Image> Ajustments> Invert

5. Coloque a Imagem Duplicada no modo Color Dodge – Veja que a Imagem Ficará totalmente branca.

6. Vá em Filter> Blur> Gaussian Blur e coloque o valor em 5,6 pixels

PRONTO!

Tutorial by: http://www.etutoriais.net/


Ganhe dinheiro agora! Resultados em 1 mês!