Inventando Sites - Soluções em Mídia Digital

Montagem de Arte Urbana - Photoshop

2011-01-06T13:53:00.001-08:00

Itens para realizar o tuto:

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x450 e pesa 140KB.

Passo 1

Antes de começarmos com o stoke, iremos criar rapidamente uma textura para uso posterior.

Portanto, criar um novo documento. Eu usei 800 x 600px lona para o meu tamanho. Certifique-se de seus conhecimentos cor é preto e sua cor é o branco. Você pode simplesmente pressione D no teclado para fazer isso.

Adicione uma nova camada e vá para Filter> Render> Clouds. Em seguida, vá para Filter> Ruído> Adicionar Ruído. Escolha as seguintes configurações: Montante 50%; Distribuição = Uniforme; monocromáticos = Ligado. Após isto, use Filter> Artistic> Dry Brush com configurações: Brush Size = 2; Brush Detail = 8; Texture = 1.

Agora, novamente, adicione um pouco de barulho, vá para Filter> Ruído> Adicionar Ruído e utilizar as configurações anteriores. Então use Filter> Artistic> Paint Daubs com as configurações mostradas na imagem:

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x450 e pesa 187KB.

Passo 2

Agora usar filtro> Brush Strokes> ondular com Spray Radius = 20 e Smoothness = 5. Sua imagem deve ser semelhante a esta:

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x450 e pesa 183KB.

Passo 3
Ir para Escolha> Color Range, escolha Destaques, bate bem, e você vai ver que áreas aleatórias no seu textura são agora seleccionada. Vamos apagá-los pressionando Delete. Além disso, eliminar a camada de background que você está feito com a sua textura! Guardá-la, vamos usá-lo mais tarde.

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x900 e pesa 395KB.

Passo 4

Agora vamos só recortar todas as imagens que vamos usar para os nossos futuros trabalhos e salvá-los.

Você pode fazer isso usando a Pen Tool (P). Se você tiver uma forma complexa que você deseja selecionar precisão (ie hairstrands), então não temer porque Eu vou te mostrar uma técnica muito útil nas etapas seguintes.

O modelo em stock photo estou usando tem cabelo muito fino vertentes. Queremos seleccionar o seu corpo, ao mesmo tempo, selecionando a precisão pêlos finos vertentes. Para isso, vá para a paleta Canais e identificar o canal com o maior contraste entre o modelo e plano. Neste caso, eu escolhi o canal verde e duplicados ele. Certifique-se que o canal é selecionado, e não oculta.

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x450 e pesa 32KB.

Passo 5
Nosso objetivo é fazer uma seleção do modelo. O modelo deve ser sólido como plano de fundo preto e branco quanto possível. Com isso em mente, temos que pintar a auscultadores e do modelo top preto sólido, uma vez que são demasiado brilhante. Então traço em torno dessas peças e preencher a seleção com preto sólido.

Passo 6

Pressione Ctrl + M para abrir a janela curvas e arraste a dois controladores mais em conjunto para aumentar o contraste entre modelo e fundo. Poderá ter de repetir este algumas vezes. No final, poderá haver ainda algumas peças brilhantes. Rapidamente traço em torno deles e enchê-las com o preto.

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x900 e pesa 104KB.

Passo 7
Se você estiver satisfeito com o resultado, Ctrl-clique no canal para fazer uma seleção. Prima Shift + Ctrl + I para inverter a seleção ou vá a Select> Invert. Agora clique sobre o canal RGB e copiar + colar a seleção em um novo arquivo 800x600px. Voila! Você selecionou o modelo com todas as belas hairstrands.

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x450 e pesa 117KB.

Passo 8

Queremos dar ao modelo um olhar angustiado. Desaturate o modelo (Shift + Ctrl + U) e duplicar a camada. Defina a camada duplicada para multiplicar e certifique-se que está no topo. Selecione esta camada, abrir a janela novamente curvas (Ctrl + M), e aumentar o contraste até que você gosta do resultado.

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x1200 e pesa 173KB.

Passo 9

Desaturate as outras imagens, adicioná-las ao modelo, e fazer uma bela composição.

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x450 e pesa 71KB.

Passo 10

Para a próxima etapa, iremos utilizar alguns danificado papel como uma textura. Basta digitalizar alguns crinkled papel ou tentar fazer uma foto com a câmera. Você pode baixar o meu papel.http://www.eon9.net/paper_texture.jpg

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x450 e pesa 125KB.

Etapa 11
Colar a textura acima nossa imagem e defina o estilo a camada Multiply. Se necessário, você também deve desaturate-lo e aumentar o contraste um pouco. Flatten a imagem e fazer uma seleção grosseira dos objetos, como a seguir:

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x450 e pesa 118KB.

Etapa 12

Colar a seleção em um novo arquivo e adicionar a textura que fizemos no início. Defina a opacidade da textura para 15% por isso é mais um fundo de efeito.

Preencha a camada de fundo o novo arquivo com uma cor de sua escolha para dar mais vida a imagem, fazendo o papel recortes contraste realmente fora do plano. Eu também acrescentou algumas notas que eu rascunhou rapidamente, usando um pequeno, redondo e escova seguida o mesmo papel textura técnica.

Não se esqueça de adicionar gota sombras para seus objectos. Desta forma eles irão analisar como se fossem de papel recortado e colado em cima.

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x450 e pesa 179KB.

Passo 13
Seguinte eu Adicionamos alguns Halftone efeitos e turbulência escovas, bem como alguns ondular pincéis. Para turbulência / ondular escovas ir para deviantART ou Brusheezy.com. Além disso, acrescentei uma imagem de uma cidade. Você pode encontrar alguns grandes escapos gratuitamente no Sxc.hu. Quando você encontrar uma imagem apropriada, desaturate a cityscape, aumentar o contraste e configurá-lo para multiplicar para obter o efeito final na imagem abaixo.

Conclusão

Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 600x450 e pesa 273KB.

Estou certo de que as texturas que você tenha criado e utilizado durante este tutorial será muito útil para alguns dos seus projetos seguintes. Creio também que a nova técnica eu mostrei-lhe extrair formas complexas também irá ajudá-lo no seu trabalho futuro. Você pode ter percebido que não necessariamente precisam de cortar os cabelos tão exactamente, uma vez que colou o modelo a uma simples tela branca. No entanto, pensei que esta seria uma grande oportunidade para eu mostrar-lhe esta técnica :-)

Gente essa foi minha primeira traduçao.

Créditos:Markus

As Cores da Web

2011-01-03T13:53:00.000-08:00

Olá Pessoal! Neste artigo veremos como lidar com as cores na web sem trazer desconforto ou fadiga ao visitante.

A escolha de uma cor para uma comunicação visual eficiente possui critérios técnicos, como aspectos fisiológicos do olho e sensibilidade à determinada cor, assim como fatores culturais, hábitos, idade, contexto e de outros fatores subjetivos.

Vários estudos tentam explicar porque determinadas pessoas preferem certas cores e qual o significado das cores em determinadas culturas.

A cultura e a religião são os aspectos mais importantes para determinar a preferência por cores. Para Cristãos e Judeus, o branco, o azul e o dourado são cores ditas sagradas enquanto para povos islâmicos é o verde e o azul brilhante. Um exemplo foi um fábrica de assentos para vaso sanitário, que não conseguiu vender assentos da cor verde em países do Oriente Médio, como também sofreu ataques, pois estaria ofendendo e agredindo o profeta Maomé, cuja cor-símbolo é o verde. Esse na verdade é um assunto delicado e polêmico, e melhor tratado em nosso artigo sobre símbolos.

As cores devem ser planejadas para interface considerando o contexto em que serão utilizadas, muitas vezes tendo que respeitar a cor do logotipo da empresa. Nesses casos podemos brincar com as cores representadas no disco de Newton.

Disco de Newton

Para sanar o problema da cor do logo da empresa usamos as cores complementares, que estão opostas no círculo das cores como, por exemplo, o verde é a complementar do vermelho.

Uma cor se intensifica quando justaposta à sua complementar, ao branco, preto ou cinza devido ao contraste criado. Uma cor reduz sua intensidade quando se mistura algo de sua complementar. Podemos então usar as cores de um logo, mesmo que muito vivo, neutralizando sua intensidade.

Mas tome cuidado, as cores são complementares quando misturadas, porém podem trazer efeitos indesejáveis quando exibidas em cores chapadas (uniformes).

No exemplo acima podemos ver que no caso de cores uniformes, as cores complementares não são tão complementares assim. O exemplo é descarado e mostra que é de muito mau gosto utilizar essas cores tais como foram aqui empregadas.

As pessoas que são daltônicas não conseguem visualizar essas combinações, sendo que as outras pessoas sentirão certo desconforto ao ler os textos acima.

O daltonismo é uma doença congênita que provoca a confusão de cores, principalmente o verde e o vermelho. Devemos estar atentos a essas cores para não agredir nossos clientes.

Cores harmônicas

Cores harmônicas são aquelas que estão próximas na seqüência no círculo das cores como, por exemplo, vermelho, laranja e amarelo, etc. As cores também podem ser harmônicas pela combinação em triângulo da roda de cores.

Outra forma de manter a harmonia de cores é o uso de uma única cor, variando-se a intensidade da mesma, ou seja, dosando-se progressivas quantidades de branco ou preto à cor pura.

Recomendações

01. Não usar itens que piscam. O uso intensivo, sendo um texto ou imagem, causa fadiga visual, pois dependendo das cores usadas para fundo, texto ou imagem, o olho precisa reposicionar o correspondente sensor da cor a ser usada em cada instante do efeito, ou dependendo das cores usadas reposicionar o foco a cada instante.

02. Evitar fundos escuros: Fundo preto não é recomendado (principalmente em portais de comunicação), pois há poucas cores que contrastam e causa cansaço visual. No caso de impressão em P & B, a cor usada para o texto ou imagem pode ser convertida para escuro e se confundir com o fundo, o que pode causar transtornos à usuários inexperientes.

03. Não usar muitas cores alternativas para links: Em muitos casos é mais interessantes fazer uso do sublinhado. (não é uma regra)

04. Reduzir o número de cores: Muitos "designers" se esquecem que a maioria dos monitores apenas conseguem representar, milhares de cores, outros 256 ou 16 cores, além dos monitores P & B que equipam sistemas comerciais. Para sistemas comerciais, usar apenas 16 cores, pois ao serem convertidas para monocromático, há padrões de cinza suficientes. Exemplo:


imagem com pouco contraste	em monitor monocromático	imagem com bom contraste	em monitor monocromático

05. Usar sempre textos com letras pretas: A letra preta, sobre um fundo claro, tem melhor legibilidade. Podemos dispor de opções para troca da cor de plano de fundo, porém esse recurso pode não ser bem aceito pela maioria.

06. Não tornar a tela muito brilhante ou escura use as cores brilhantes em áreas pequenas e cores suaves em áreas maiores.

07. Não apostar na boa habilidade visual de todos os usuários, grande número de pessoas têm algum tipo de disfunção visual tais como os daltônicos. A distorção de algumas lentes também pode provocar estes efeitos.

08. Não associar muitas cores para serem lembradas (tais como as de links), as cores podem possuir um significado, além daqueles mais populares (vermelho para Pare e Verde para Seguir).

09. Cores Opostas: se vermelho é Pare: o oposto é verde; se vermelho é calor (quente); o oposto é azul (frio).

10. Associações simples melhor captadas por leigos:

vermelho: pare, perigo, fogo, quente.
amarelo: cuidado, atenção, aviso.
verde: siga, aprovação, okay.
azul: frio, água, sono.

Assegurar que todas as informações vinculadas com a cor estejam também disponíveis sem cor. Se a cor for o único meio utilizado para transmitir informações, as pessoas que não diferenciam cores, bem como os usuários de monitores monocromáticos e dispositivos não coloridos, não receberão essas informações.

Pois é pessoal. Tenham em mente que as cores mal utilizadas são piores do que não fazer uso delas.

Abraços!

Fonte:

Wellington Carrion é Autodidata, leciona cursos de desenvolvimento web e aulas de desenho artístico. Também é sócio fundador da agência Team Design, onde gerencia e coordena seus projetos. Mais sobre o autor pode ser encontrado em seu site pessoal (www.wellington.art.br)

wcarrion@gmail.com

http://www.wellington.art.br/

Exibir Parcelas de Pagamento - Magento

2011-01-03T13:31:00.001-08:00

Quem usa o Magento já deve ter notado que ele exibe sempre o preço cheio do produto, nunca mostra os valores em parcelas. E eu posso imaginar o por quê!

Imagine as inúmeras possibilidades de configuração. Alguns produtos você deseja parcelar, outros não, ou exige um valor mínimo de parcela, ou até 6x é sem juros e depois tem acréscimo de n%, ou no cartão X tem juros e no Y não tem, enfim, você poderia inventar N maneiras de configurar suas parcelas.

Enquanto alguém não inventa uma extensão para isso, ou pelo menos uma extensão grátis e em português, eu vou apresentar uma solução simples, que funciona dentro de suas limitações. Mas que pode ser facilmente alterada para se adaptar as suas necessidades.

E o melhor (do meu ponto de vista), essa solução já ensina a usar atributos e a manipulá-los dentro do código.

Então pra começar, vamos criar um atributo “parcelas” para seus produtos, onde você vai informar o número de parcelas para cada produto cadastrado, então assim que você fornecer o preço do produto já informa também em quantas vezes pode ser parcelado o pagamento.

Na área administrativa vá em Catálogo -> Atributos -> Gerenciar Atributos e clique em Adicionar Novo Atributo.

Nas propriedades do atributo informe o código “parcelas” para identificarmos o atributo dentro do código posteriormente. O escopo pode ser global, o valor padrão pode ser 1 (de 1 parcela), valor único não, valor requerido sim, validação número inteiro, aplicar para todos os tipos de produtos. No demais pode deixar tudo não, e nas opções de etiquetas pode deixar o identificador como “parcelas“.

criando atributo

Depois de salvar este novo atributo, teremos que vinculá-lo aos atributos do produto. Para isso vá em Catálogo -> Atributos -> Gerenciar Grupo de Atributos, você deve ter na lista de grupos apenas o grupo “default“, que é o normal. Selecione este grupo e veja que na coluna da direita agora aparece o atributo de identificador “parcelas” que você criou anteriormente.

Para adicionar ao grupo basta clicar sobre o nome e arrastar até a pasta que desejar, sugiro que coloque na pasta Prices – Preços perto do atributo preço ou preço especial para que você se lembre de informar um valor de parcela sempre que informar o preço do produto. Não esqueça de salvar o conjunto de atributos depois de arrastar.

vincular ao grupo

Agora sempre que for criar ou alterar algum produto você terá este campo a mais para preencher. Primeira etapa concluida.

Já temos o valor das parcelas, precisamos agora exibir isto na tela, basicamente em dois momentos distintos. Na listagem dos produtos em grid ou lista e nas visualizações individuais de cada produto. Da mesma forma que fizemos no exemplo do post sobre exibir R$ Consulte no lugar dos preços.

Então vamos abrir o arquivo list.phtml que fica na pasta app -> design -> frontend -> default -> default -> template -> catalog -> product responsável por apresentar a lista dos produtos do catálogo em forma de grid ou lista.

Encontre a linha responsável por imprimir o preço dos produtos na tela, você deve encontrar uma na linha 60 (list) e outra na linha 104 (grid).

<?php echo $this->getPriceHtml($_product, true) ?>

Abaixo dessa linha adicione o seguinte código:

<?php 
$_coreHelper = $this->helper('core'); 
$_product->load( $_product->getId() ); 
$vezes = $_product->getResource()->getAttribute('parcelas')->getFrontend()->getValue( $_product ); 
echo '<small>Parcele em at&eacute; '.$vezes.'x de '.$_coreHelper->currency( $_product->getFinalPrice()/$vezes, true, false ).'</small><br />'; 
?>

nota: Você pode alterar a descrição e a posição apenas mudando o bloco de lugar, para formatar cores, fontes, tamanhos procure utilizar css.

parcelas na listagem

Feito isso vamos para o arquivo addtocart.phtml que fica na pasta app -> design -> frontend -> default -> default -> template -> catalog -> product -> view responsável por apresentar o preço do produto individualmente, logo abaixo da linha.

<?php $_product = $this->getProduct() ?>

Vamos adicionar o código abaixo:

<?php 
$_coreHelper = $this->helper('core'); 
$vezes = $_product->getResource()->getAttribute('parcelas')->getFrontend()->getValue( $_product ); 
echo '<small><b>Parcele em at&eacute; '.$vezes.'x sem juros</b></small><br />'; 
for ( $i=1; $i <= $vezes; $i++ ) { 
echo '<small>'.$i.'x de '.$_coreHelper->currency( $_product->getFinalPrice()/$i, true, false ).'</small><br />'; 
} 
echo '<br />'; 
?>

nota: Você pode alterar a descrição e a posição apenas mudando o bloco de lugar, para formatar cores, fontes, tamanhos procure utilizar css.

parcelas de preço

Eu sei que não é uma solução definitiva, mas você pode adaptar, por exemplo se quizer acrescentar juros nas parcelas basta calcular onde já é feito a divisão. Entre outras inúmeras possibilidades.

Sucesso!

Fonte: Mario SAMFormado em TI, desenvolvedor sênior sun java certified, gerente de ecommerce, e faixa preta!

Desenvolvendo uma campanha de e-mail

2011-01-03T12:46:00.001-08:00

Do planejamento à mensuração dos resultados

A partir desse artigo apresentarei o desenvolvimento de uma campanha publicitária em todas as suas fases. Dividirei o conteúdo em capítulos para poder apresentar-lhes um maior volume de dados e informações em cada um deles. Dessa forma, os artigos serão divididos assim:

Cenário
Pesquisa de Dados
Planejamento: Objetivos, Estratégias, Táticas.
Apresentação do Plano de Mídia
Execução / Controles
Mensuração dos Resultados - ROI, CTR, Unique Visitor, Impressões, Overview.
Apresentação dos Resultados

Cenário da Internet:

O Brasil é o 6.º maior mercado do mundo em internet, sendo o 1.º da América Latina, e tem hoje cerca de 50 milhões de usuários. Isso significa que cerca de 26% dos brasileiros estão conectados à rede. De 2000 a 2008 o Brasil teve um aumento de cerca de 900% nos usuários de internet (Fonte: Internet World Stats - www.internetworldstats.com). Qual outra mídia teve um crescimento parecido com esse?

Também somos o país com maior tempo de navegação, com 22h47, contra 20h12 dos franceses, 19h33 dos norte-americanos e 19h14 dos japoneses. Em termos de páginas navegadas, somos o 8.º país do mundo. (IBOPE - NielsenNetRatings - abr./08)

32% dos usuários navegam todos os dias
19% navegam todos os dias úteis
12% navegam de 3 a 4 vezes por semana
23% navegam 1 a 2 vezes por semana
11% navegam menos de 1 vez por semana
1% Não sabem / Não conectam

Estes dados sobre o tempo de navegação geram diversas discussões entre profissionais de mídia on-line. Uns alegam que o brasileiro navega durante tanto tempo por ter uma conexão muito ruim, o que eleva o tempo de navegação pela demora no carregamento das páginas. Outros não concordam com isso por alegarem que para acessar o MSN, Orkut e alguns portais de notícias (esses são os que têm maior tempo de permanência de usuários), não é necessário uma conexão tão veloz. E você, o que pensa disso? Vou deixar essa questão para um futuro artigo.

Celular

O celular está longe de ser apenas um aparelho para fazer e receber ligações. As modernas e atrativas campanhas publicitárias da indústria de telefonia celular alardeiam as inovações em diversas mídias, o tempo todo.

Uma pesquisa publicada pelo Nielsen Brasil, em agosto de 2008, mostra que 79,9% dos jovens (15-24 anos) mandam mensagens de texto; 72% dos homens e 28% das mulheres jogam pelo celular; 7% dos brasileiros utilizam a internet pelo celular, a maior parte (57%) o faz para acessar e-mails.

Classe C

Outro dado significativo para qualquer planejamento de mídia é o constante crescimento da classe C.

O número de pessoas com nível sócio-econômico médio passou de 37% em 2006 para 44% em 2007. Nos últimos dois anos, foram mais de 22,5 milhões de pessoas que ingressaram neste estrato social, o maior atualmente. Com isso, cresce o acesso a cartões de crédito, bens e serviços.

Em 2006, apenas 15% da população brasileira possuía este bem. No ano passado, este percentual passou para 23%. Também cresceram os percentuais da internet paga (4% para 6%) e TV por assinatura (4% para 6%).

Quem alavanca o consumo são os que acreditam no aumento do poder de compra. 87% usam o dinheiro disponível para pagar dívidas; 60% compram aparelhos eletrônicos, carros e celulares; 54% poupam e guardam o dinheiro; 50% compram produtos não usuais; 37% trocam as marcas por outras mais caras e 33% compram viagens, assinaturas de TV e acesso à internet. Entre os mais jovens, a propensão ao consumo é ainda maior. (Fonte: Nielsen Brasil)

Apenas com esses dados é possível se ter uma idéia do tamanho do mercado que temos pra explorar. Isso sem falar em games, iPhones, virais, etc. Portanto, concluímos que não podemos excluir as mídias on-line de nossos planejamentos.

Maiores informações, pesquisas e estatísticas podem ser encontradas no Nielsen (www.br.nielsen.com) e no IBOPE (www.ibope.com.br).

Fonte:

Carlos Eduardo de Lima É coordenador de planejamento da agência MR\\Tempo - Propaganda e Design. É formado em de Publicidade e Propaganda pela UNIP Bauru e cursa MBA em Marketing na FGV. Foi vencedor do 28º Concurso Universitário de Campanhas Publicitárias da APP Brasil, em 2007, e do Prex 2007 Unip. É consultor de comunicação do Bendito Santo Botequim e do Biolab Laboratórios. Exporadicamente ministra palestras sobre publicidade, mídia, planejamento, marketing e mídias sociais.

kadu@perdidosnanight.com.br

http://pitacoalheio.blogspot.com

Efeito Reflexo em Objetos - PhotoShop

2011-01-03T12:40:00.000-08:00

Software Utilizado: Photoshop CS2 em inglês
Grau de Dificuldade: 7,0
Ao som de: “Truly Madly Deeply” (Savage Garden)

Olá pessoal, tudo bem? Já inicio me desculpando pela ausência, mas graças a Deus, ando com bastante trabalho, e espero daqui pra frente não me ausentar por tanto tempo mais.

Vamos ao que interessa, dando continuidade ao nosso último artigo. Iremos estudar o efeito de Reflexo em imagem de objetos 3D, ou seja, que tenham altura, largura e profundidade.

01. Abra um documento (Ctrl+N) de 400x300 pixels e fundo branco, como na imagem abaixo.

02. Selecione uma imagem em 3D, que desejar e retire o fundo dela (se houver). No meu caso, selecionei a seguinte imagem:

03. Duplique (Ctrl+J) a imagem e arraste uma camada abaixo da original.

04. Feito isso, vamos inverter a posição da imagem e movê-la para baixo de acordo com a figura. (Editar > Transformar > Virar Vertical).

05. Agora, com esta camada selecionada, o ponto fundamental do artigo, que consiste em transformar (inclinar) a imagem, de forma que ela pareça um reflexo do objeto acima!

Claro, vou explicar com as imagens. Erga um pouco as duas imagens, para que você as visualize melhor.

06. Selecione a ferramenta “Seleção” (M), e selecione a área conforme a figura:

Feito a seleção, você irá notar que a mesma não ultrapassa as dimensões da tela que criamos. Para isso, vamos editar a seleção.

07. Vá em Seleção > Transformar Seleção, e faça conforme a figura.

08. Feito isso, vamos incliná-la. V á em Editar » Transformação » Inclinar. (Edit » Transform » Skew) e faça conforme a figura:

09. Repita a operação com a outra perna da cadeira, e veja o resultado:

10. Calma, estamos quase lá. Ative o modo máscara e selecione a ferramenta degradê como nas imagens:

11. Clique e arraste conforme a figura.

12. Volte agora ao modo Standard (Q) e você irá notar a seleção que ficou automática.

13. Você deverá invertê-la e deletar, até que fique como na figura:
(Não esqueça de inverter a seleção antes de deletar, senão não dará certo!)

14. Arraste as 2 imagens para baixo para visualizá-las de forma completa e pronto!

Uma outra amostra do que pode ser feito com o efeito!

Pronto! Tentei passar aqui apenas a noção de como fazer o efeito, pois existem “n” imagens de objetos 3D e pode ser que em algum não de pra fazer desta forma simples, mas nada que pensar um pouco na hora não resolva!

Bom é isso, espero ter ajudado! Dúvidas, deixem um comentário abaixo!

Um grande abraço a todos e fiquem com Deus!

Fonte:

Arthur Henrique é designer e ilustrador, trabalha com web há 8 anos, com trabalhos feitos para grandes, médias e pequenas empresas.

contato@arthurhenrique.com

Galeria de Fotos com efeito Lightbox

2011-01-03T12:37:00.000-08:00

Neste artigo estudaremos o desenvolvimento de uma galeria de fotos com efeito Lightbox. Este exemplo consistirá em 5 fases:

1ª Parte

Criar uma pasta no seu servidor IIS e copiar os arquivos em sua pasta raiz. Faça o download dos arquivos.

2ª Parte

Criar um banco de dados, em nosso caso Access com o nome de BD.mdb

3ª Parte

Criar uma tabela com o nome de TB_FOTOS com os seguintes campos: id_foto | foto

4ª Parte

Inserir nomes das figuras no seu banco de dados, conforme a figura abaixo:

5ª Parte

Montar a página de exibição, no nosso caso, default.asp

<%' Descrevendo caminho do seu banco de dados
strCon = "DBQ=c:\inetpub\wwwroot\img\bd\BD.mdb;Driver={Microsoft Access Driver (*.mdb)};"
' Abrindo conexão e record set para chamar informações da Tabela com o nome das fotos.
Set objRS = Server.CreateObject("ADODB.Recordset")objRS.CursorLocation = 3
objRS.CursorType = 0objRS.LockType = 1strSQL = "SELECT * FROM TB_FOTOS"
objRS.Open strSQL, strCon%><html><head>
<title>Mostrando Imagens</title><%
'Chamando arquivos para CSS e javascript para utilização do script.%><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type='text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<style type="text/css">.texto {font-family: Verdana;font-size: 10px;
color: #000000;}</style></head><body scroll='auto">
<table width="265" border="0" align="center" cellpadding="15" cellspacing="1" bgcolor="#D4D0C8">
 <tr>
  <td align="center" bgcolor="#F7F5F4"><span class="texto"><strong>Galeria de Imagens</strong></span></td>
 </tr> <tr>
  <td align="center" bgcolor="#FDFDFD"><table width="0" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#FAF9F8">
   <tr></tr>   <tr><% 'Iniciando variável contador e loop para exibir em colunasi = 1 
Do While Not objRS.EOF %>
    <td align="center" bgcolor="#D4D0C8" class="texto"><a href="fotos/<%=objRS("foto")%>" rel="lightbox[roadtrip]"><img src="fotos/<%=objRS("foto")%>" border="0" width="100"height="80"></a></td>
    <%'Define quantidade de colunasIf i = 2 Then i = 0 
Response.Write "</TR><TR>" End If i = i + 1 objRS.MoveNext Loop %>   </tr>   <tr></tr>  </table></td>
 </tr> <tr>
  <td align="center" bgcolor="#F7F5F4"><span class="texto"><strong>Desenvolvido por</strong>: 
Alexandre de Luccia </span></td> </tr></table>
</body></html><%objRS.close%>

O resultado da página default.asp é este:

E por fim veremos o efeito em funcionamento ao clicar sobre a imagem:

Observações importantes:

Você pode alterar as imagens para passar para próxima foto e fechar na pasta images.
Lembre-se se estiver usando <iframe> para exibir as fotos esse script não é útil.
Procure não mexer muito nos arquivos localizados na pasta js.

Referências:

http://www.dynamicdrive.com/

Qualquer dúvida entre em contato comigo deixando um comentário. Abraços!

Tutorial - Instalação do Magento

2011-01-03T12:02:00.001-08:00

O Magento é um projeto open-source voltado para a criação de lojas online. É hoje um dos melhores sistemas para e-commerce, usado por desenvolvedores do mundo todo.

Requisitos

Para instalar o magento, é preciso ter os seguintes programas instalados:

Apache 1.3.x, Apache 2.0.x ou Apache 2.2.x
PHP 5.2.0 ou superior
MySQL 4.1.20 ou superior

Verificar compatibilidade

Antes de iniciar a instalação do magento, faça o download do magento check para verificar se o servidor é compatível com o Magento.
Extraia o arquivo magento-check.zip e envie para o servidor o arquivo magento-check.php
Agora acesse http://seusite.com/magento-check.php e verifique se retorna alguma mensagem de erro. Se estiver tudo correto será exibo a mensagem “Congratulations! Your server meets the requirements for Magento”.

Baixar o Magento

Para baixar o Magento, acesse a área de download e clique em “No, thanks. Just take me to the download page”.
Escolha a ultima versão estável e selecione o formato do arquivo. Depois clique no botão DOWNLOAD

Enviar para o servidor

Ao extrair o arquivo baixado, terá a pasta magento. Abra seu cliente FTP e envie a pasta magento para o diretório root do Apache, geralmente com o nome public_html.
Após terminar de enviar todos os arquivos, de a permissão de escrita para o servidor, definindo para 777 o arquivo .htaccess e os diretórios abaixo:

magento/var/.htaccess
magento/app/etc
magento/media
magento/var

Instalação

Acesse http://www.seusite.com/magento/ e será direcionado para a instalação.

Marque a opção “I agree to the above terms and conditions” e clique no botão Continue.

No campo Locale, selecione “Português (Brasil) / português (Brasil)”.
Em Time Zone selecione “E. South America Standard Time (America/Sao_Paulo)”.
E em Default Currency selecione “Real Brasileiro”.
Depois clique no botão Continue.

Para a conexão com o banco de dados, preencha os campos: Host, Database Name, User Name e User Password.
Clique no botão Continue para prosseguir para a tela de criação da conta do usuário administrador.

Preencha os campos da conta do administrador. Deixe em branco o campo Encryption Key para ser gerado automaticamente na próxima pagina.

Finalmente o Magento instalado. Clique no botão Go to Fronted para acessar a loja.

Parabéns, agora você já pode se divertir navegando pelas áreas da loja para ver as funcionalidades.

Para entrar no painel de administração, acesse http://seusite.com/index.php/admin/ ou http://seusite.com/admin/ e infome o usuario e senha criado na instalação.

Qualquer problema na instalação, deixe um comentário que terei o prazer de ajudar

Edit 02/01/2010
Para aqueles que estão com problema em logar na area administrativa, a solução é ir na pasta app/code/core/Mage/Core/Model/Session/Abstract e comentar algumas linhas do arquivo varien.php, como mostra abaixo:

session_set_cookie_params(
$this->getCookie()->getLifetime(),
$this->getCookie()->getPath()/*,
$this->getCookie()->getDomain(),
$this->getCookie()->isSecure(),
$this->getCookie()->getHttponly() */
);

Quem Somos

2011-01-03T11:50:00.001-08:00

Sites, Hotsites, loja virtual, campanhas de markting virtual, e-mail marketing, gerenciamento de projetos, sistemas on-line para diversos setores profissionais. Esses são alguns serviços que a Inventando Sites irá oferecer para você. Navegue em nosso site e conheça nossos serviços.

Somos uma nova empresa que possui uma grande experiência no ramo de atividade que atuamos, pois atuamos no mercado a mais de 10 anos, e após muita conversa resolvemos "encarar" o desafio de ter uma empresa.

Desenvolvemos diversos tipos de projetos, sempre voltados para ajudar a sua empresa há entrar em evidência no mercado da internet, e com isso obter resultados satisfatórios e consequentemente o crescimentos dos lucros..

Com profissionais altamente qualificados, estamos sempre nos aprimorando para oferecer aos nossos clientes o que há de melhor no mercado em tecnologia e resultados. Trabalhamos com sites otimizados que ajudam totalmente na sua posição em mecanismos de busca, os chamados SEO. na maioria dos casos nossos objetivos foram alcançados.

Nossa Missão

Inovação - Com esse pensamento e disposição, buscamos sempre oferecer soluções para nossos clientes, sempre em busca soluções cirativas e diferentes, porém com extrema responsabilidade sobre a sua marca.

Credibilidade - Fazemos de nossos clientes, verdadeiros amigos e parceiros de trabalho. A confiança e a credibilidade hoje, são fatores primordiais para qualquer empresa. A Fidelidade de nossos clientes é primordial para a Inventando Sites.

Qualidade - Buscamos a pefeição em tudo que desenvolvemos ou criamos. Pensamos sempre em agradar nosso cliente e o mercado no qual o mesmo atua. Dessa forma a qualidade é nossa principal meta, buscando sempre levar a marca de nossos clientes em um mercado tão competitvo como no que vivemos.

Descubra o que podemos lhe oferecer!