Por quantas vezes você teve que estilizar um layout do psd para html5 e css? Já pensou em transformar tudo isso com apenas alguns cliques?
Pois bem, apresento a vocês uma solução inovadora, é o PSDTOWEB! Esse sistema promete facilitar demais na implementação de projetos em html5 e css, basta fazer upload do seu layout em PSD (fonte do photoshop) para o site, selecionar os itens que são imagens e textos e só baixar o projeto com tudo separado em pastas.
Vale a pena conferir!
Se gostou não esqueça de fazer seus comentários e compartilhar com seus amigos.
Acredito que você por diversas vezes já pensou em criar seu blog pessoal, mas não sabe por onde começar. Aqui vou apresentar algumas tecnologias e formas para você criar um blog facilmente.
Como criar um blog no wordpress
Acesse pt-br.wordpress.com e clique em “Comece por Aqui“. Se você iniciar por www.wordpress.com o tutorial é o mesmo, mas os passos para a criação serão em inglês.
O primeiro campo é o mais importante. Ele será o endereço de seu
blog. Escolha o endereço que desejar e o wordpress informará sobre a
disponibilidade ou não do mesmo.
Preencha os outros campos com a senha desejada, seu email, idioma
(escolha pt-br – Português Brasileiro ou o idioma de sua preferência).
Após terminar, siga para o final da tela e clique em “Create Blog” na
opção gratuita.
Um e-mail será enviado para o endereço que cadastrou no passo
anterior para confirmação. Para que sua conta seja ativada, acesse esse
e-mail, clique no link indicado e pronto!
Com a conta ativada, volte para a página principal do wordpress.com, clique em “Login” e entre com os dados que preencheu no formulário de criação do blog.
Dentro da administração poderá ver todos os blogs que possui (por
enquanto apenas um). Clique sobre “Painel” logo abaixo do nome de seu
blog para administra-lo.
A administração é bastante simplificada. Na lateral esquerda está a
barra de menu onde é possível personalizar o tema, escolher plugins e o
principal, criar novos Posts! Vamos fazer isso agora.
Clique em “Posts” e depois em “Adicionar Novo Post”.
Coloque o título do post no campo indicado e abaixo pode começar a
escrever. Para publicar, clique em “Publicar” na lateral direita.
Simples não?
O wordpress além de um blog, é um gestor de conteúdo completo e
permite muita customização (um pouco menos nessa versão online já que
ela bloqueia a instalação de plugins).
Existem milhares de temas gratuitos disponíveis, muitos deles
customizáveis que permitem deixar seu blog único na internet. Para
alterar o tema clique em “Aparência” na lateral esquerda. Basta escolher
o tema e clicar em “Ativar” no tema desejado (note que existem temas
pagos que podem ser ativados apenas mediante compra).
Se você chegou até aqui, já pode se considerar proprietário de um
blog wordpress.
Abaixo vou apresentar outras formas.
Como criar um blog no Blogspot
Primeiro, entre com a sua Conta Google no site do Blogspot
(www.blogspot.com) . Caso você ainda não tenha uma Conta Google, entre
no site www.google.com.br e clique na parte superior direita da tela em
“Efetuar Login”, em seguida clique em “Crie uma conta agora” e preencha
os dados. Feito isso, vá ao site do Blogspot e entre com seu login e
senha.
Vale lembrar que muitos sites chamam o Blogspot de “Novo Blogger” ou
até mesmo “Blogger”. Não se deve confundir os endereços, afinal o
“Blogspot” é de propriedade da Google e é inteiramente gratuito. O
Blogger é de propriedade de outra empresa e é preciso ser assinante para
criar uma conta.
Agora que você já criou a sua Conta Google e já se
registrou no Blogspot, é hora de criar o seu blog. O primeiro passo é
clicar em “Criar um blog”. Depois você deve dar nome ao blog e criar um
endereço.
A URL do seu blog dependerá do tipo de blog que você deseja ter. O
Blogspot permite que você use um domínio que já tenha comprado para
publicar seu blog. Neste caso, seu endereço fica de acordo com o seu
domínio, por exemplo, www.nomedoseublog.com. Contudo, se você não
possuir um domínio, o Blogspot vai fornecer um, o resultado é parecido
com este: http://nomedoseublog.blogspot.com.
Depois de ter preenchido todos estes dados corretamente, é hora de
escolher um modelo de layout para o seu blog. Não se preocupe, neste
primeiro momento você pode escolher qualquer um – existem muitos outros
modelos para você deixar o seu blog com a sua cara. Quando você já tiver
escolhido qual será o primeiro layout, clique em “Continuar” e voilà!
Seu blog está pronto!
Com o blog já criado, é hora de postar seu primeiro texto ou imagem.
Clique em “Começar a usar o blog” para dar o pontapé inicial no seu
transmissor de idéias. Você será redirecionado automaticamente para a
página de novas postagens. Digite o que quiser nos campos de postagem,
mas lembre-se de não violar nenhuma das regras de conduta do Blogspot e
da Google – caso contrário, seu blog será banido. Quando terminar a
edição do seu texto, basta clicar em “Publicar Postagem” para que o
conteúdo seja enviado para a página principal do seu blog.
Preste atenção nas três abas na parte superior da tela. Por elas você
navega nas configurações do seu blog. Na aba “Configurações” você
altera as principais opções do seu blog como importação e exportação de
conteúdo ou até mesmo excluir o seu blog. As ferramentas de importação e
exportação são importantes para fazer backups do seu conteúdo. Quando
você exporta o conteúdo do seu blog, além de garantir que terá uma cópia
de tudo para o futuro, ainda pode utilizar este mesmo conteúdo quando
for trocar o endereço para um outro sistema, como o WordPress.
Basta exportar e na interface do outro blog, clicar em importar e
carregar o arquivo XML. Ainda falando sobre as configurações do seu
blog, você pode moderar e trocar permissões referentes aos comentários.
Nesta tela, você ainda pode controlar suas opções de feed RSS. Caso
você queira, pode inserir aqui o endereço do seu burner de feeds. Um dos
mais populares é o FeedBurner (www.feedburner.com). Estas feeds servem
para que os usuários possam receber suas atualizações dos leitores de
feeds deles. São vários leitores; o Google Reader é um dos mais
utilizados e fáceis de mexer na hora de adicionar feeds. Estes leitores
permitem que os seus visitantes leiam vários blogs simultaneamente.
Na aba “Layout” é possível alterar a ordem dos seus gadgets, ou seja,
dos complementos da barra lateral do seu blog. Um exemplo bastante
simples do que são estes gadgets é a área de perfil, onde você conta um
pouco da sua história ou a sua relação com o blog; o arquivo do blog que
vai listar os seus posts de acordo com a data em que foram publicados e
várias outras ferramentas que podem ser fornecidas pelo próprio
Blogspot ou por sites externos – basta copiar o código e colar em uma
nova janela de HTML dos seus gadgets.
Com esta aba ativa, você vê quatro funções diferentes: “Elementos da
página”, “Fontes e cores”, “Editar HTML” e “Escolher novo modelo”. Se
você abrir a opção “Fontes e cores” vai se deparar com uma janela de
personalização do tema atual do seu blog. Nela, é possível mudar as
cores do texto, plano de fundo, links e muito mais. Em “Editar HTML”, é
preciso dominar pelo menos o básico desta linguagem para operar algumas
mudanças no seu layout.
“Escolher novo modelo” já é
auto-explicativo – nesta janela, há uma lista com diversos temas para
que você escolha qual deles combina mais com o estilo do seu blog. Se
você não gostar de nenhum dos temas que o Blogspot oferece, uma pesquisa
no Google bastará para encontrar o tema perfeito. Lembre-se de salvar
todas as alterações que fizer para que elas tenham efeito no seu blog.
Segue um vídeo que poderá ajudá-lo também.:
Youtube - Como criar um Blog
É isso aí pessoal, espero que tenham gostado do material, criem materiais de qualidade na web, e sejam ótimos blogueiros.
Como
designer, você tem a necessidade de ser versátil e rápido quando se
trata de projetar para os clientes. Às vezes você pode não ter o tempo
para elaborar algo totalmente sozinho, ou pode achar que você está
perdendo um certo elemento. Tendo conjuntos de ícones pode ajudá-lo a
criar anúncios, banners, cabeçalhos de blog, imagens de campanhas e de
design web em um piscar de olhos. Use os ícones para destacar
informações importantes, como parte de imagens de fundo.
Você
deve começar usando um com conjuntos de ícones a partir de um único
pacote e tentar chegar em várias maneiras que você pode usá-los. A
partir daí, tente usar conjuntos de ícones de diferentes estilos e
descobrir maneiras de incorporá-los em projetos diferentes.
Vou deixar um set de ícones completo que irá ajudá-lo bastante em seus projetos.
Você está criando algum site responsivo e precisa testar em vários dispositivos? Já encontrou alguma ferramenta que facilita esse tipo de teste com maior rapidez?
Pois bem, seus problemas acabaram! Apresento a vocês o Screenqueri. Com o Screenqueri você pode arrastar linhas guia, ver seu site em vários dispositivos como smartphones, tablets e tudo em uma interface muito simples e prática e o melhor tudo via web.
É só fazer um cadastro pequeno e rápido e pronto, aí é só começar seus testes.
Já está procurando renovar sua biblioteca com novas fontes? Legal, nesse post vou apresentar 8 lindas fontes gratuitas para você usar em seus projetos de design.
As fontes possuem traços leves, algumas com linhas e formatos bem originais e modernas.
Sabe aquelas animações super elaboradas dos Doodles? Já tentou imaginar como aquelas são criadas sem uso de flash? Pois bem, o Google acaba de lançar uma super ferramenta que dará a você a possibilidade de criar animações em Javascript e HTML5 em questões de minutos, ou até criar um site completo.
O Google Web Designer é um software que pode ser instalado em Windows ou em Mac, e tem como principal objetivo de criar sites e banners em HTML5 com animações em javascript e responsivo.
Acho que conforme o uso muitas coisas ainda podem ser descobertas nesse software que vai mudar a maneira de criar sites e animações para web.
Assista esse vídeo demonstrativo, é rápido vale conferir um pouco do que ele pode fazer:
Não há dúvidas que na web estão cheios de pacotes de ícones gratuitos, sites de pesquisa de ícones ou coisas do tipo.
Mas um extensão nova criada pela equipe do Smashing Magazine promete facilitar a vida de muitos designers, a ferramenta consiste em facilitar a inserção e pesquisa de ícones vetoriais no photoshop.
BlendMe.in é uma extensão leve e bem prática através dela você pode simplesmente arrastar e soltar e, em seguida, facilmente continuar a sua criação. Todos os ícones são vetorial e foram inseridos como Photoshop Smart Objects, o que significa que você tem todos os componentes ícone como camadas (objetos vetoriais, camadas de ajuste, etc), de modo que você pode facilmente ajustá-los para corresponder à sua criação.
Imagino que você já precisou desse recurso várias vezes, e sempre foi um tanto chato retirar fundos de imagens.
Apresento a vocês uma ferramenta revolucionária, com ela você pode fazer recortes de fundos em segundos não é nenhum photoshop da vida não há nada complexo, você usa ele diretamente no site não necessitando de nenhuma instalação.
Basta apenas você fazer o envio da imagem no site e fazer contornos verdes, onde você quer que permaneça na imagem e fazer marcações em vermelho de onde deseja apagar. É tão rápido que parece mágica hehe!
Por diversas vezes precisei de um script ou código que fizesse esse tipo de alinhamento, e na maioria das vezes era uma situação um tanto complicada pra ser executada.
Com o Absolute Centering foi prático, o elemento foi centralizado no centro vertical e horizontal, com pequeno trecho de código css, confira no site http://codepen.io/shshaw/full/gEiDt e veja o quão simples é o uso.
O código é compativel com os seguintes browsers:
Chrome, Firefox, Safari, Mobile Safari, até no IE8-10.
Pessoal, sempre que vou fazer um trabalho de layout de lojas e-commerce ficamos naquela busca de ícones para formas de pagamento, em uma pesquisa encontrei esse set de ícones minimalistas, são de ótima qualidade e estão disponíveis nas seguintes dimensões: (32 × 32, 64 × 64, 128 × 128 and 256 × 256 pixels), o pack acompanha formatos de PNG, PSD e Ai.
Lançado sob licençaCreative Commons - Licença 3.0 livremente disponíveis paraprojetos privadose comerciais.
Agora é só aproveitar e criar excelentes trabalhos com esse material.
Você alguma vez teve aquela dor de cabeça para customizar o checkbox ou radio button para seu site? Pois bem seus problemas acabaram! rs'
Com oiCheckvocê pode customizar seus itens de formulário com um estilo leve, agradável e com animações, tudo isso com muita facilidade, usando Jquery.
Através da ferramenta, você consegue alterar cores, estilos, formatos, o código fica pronto e você pode instalar usando o passo a passo, quer coisa mais fácil que isso?
