Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Catalin Rosu committed Dec 29, 2013
0 parents commit 5222844
Show file tree
Hide file tree
Showing 110 changed files with 21,042 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
_site
rtd.sublime*
5 changes: 5 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
name: RedTeamDesign
markdown: redcarpet
pygments: true
permalink: /:title
exclude: [rtd.sublime-project, rtd.sublime-workspace]
44 changes: 44 additions & 0 deletions _layouts/default.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width">

<!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/syntax.css">

<!-- Custom CSS -->
<link rel="stylesheet" href="/css/main.css">

</head>
<body>

<div class="site">
<div class="header">
<h1 class="title"><a href="/">{{ site.name }}</a></h1>
<a class="extra" href="/">home</a>
</div>

{{ content }}

<div class="footer">
<div class="contact">
<p>
Your Name<br />
What You Are<br />
you@example.com
</p>
</div>
<div class="contact">
<p>
<a href="https://github.com/yourusername">github.com/yourusername</a><br />
<a href="https://twitter.com/yourusername">twitter.com/yourusername</a><br />
</p>
</div>
</div>
</div>

</body>
</html>
9 changes: 9 additions & 0 deletions _layouts/post.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
layout: default
---
<h2>{{ page.title }}</h2>
<p class="meta">{{ page.date | date_to_string }}</p>

<div class="post">
{{ content }}
</div>
19 changes: 19 additions & 0 deletions _posts/2009-09-20-css-tips-and-tricks.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
author: Red
comments: true
date: 2009-09-20 13:15:10+00:00
layout: post
slug: css-tips-and-tricks
title: CSS tips and tricks, tutorials, templates
wordpress_id: 3
categories:
- Miscellaneous
---

What Red Team Design is about?

Red Team Design blog will offer intuitive and comprehensive tutorials, tips and tricks articles and templates design guidelines. The blog will be kept fresh with articles about CSS and web design. From time to time we will design templates and make available for our readers their sources.
<!-- more -->
Reading our blog you will learn how to become a better web designer and create stunning websites.

Subscribe for free to our [RSS Feed](http://feeds.feedburner.com/redteamdesign) updates to make sure you read the latest articles as soon as they are published.
101 changes: 101 additions & 0 deletions _posts/2009-09-24-create-a-cool-wallpaper.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
---
author: Red
comments: true
date: 2009-09-24 21:22:12+00:00
layout: post
slug: create-a-cool-wallpaper
title: Create a cool wallpaper
wordpress_id: 23
categories:
- Miscellaneous
tags:
- design
---

This is my first tutorial for you here at red-team-design.com. For my first tutorial I decided to show you how to create a cool neon-effect wallpaper  in just couple steps using Adobe Photoshop and a little patience.

[![](http://www.red-team-design.com/wp-content/uploads/2009/09/neon-wallpaper.jpg)](http://www.red-team-design.com/create-a-cool-wallpaper/)

<!-- more -->

But let's start with the first things first. The first thing you must do before being able to create your wallpaper is to create a new Photoshop  file (you can use CTRL+N shortcut) and name it as you wish (I chosen "Wallpaper" ):

![new](http://www.red-team-design.com/wp-content/uploads/2009/09/new.png)

After you will do that , by using right-click on the background layer from the layers palette , choose "Layer From Background" to unlock it.

![layer-from-background](http://www.red-team-design.com/wp-content/uploads/2009/09/layer-from-background.png)

Now we've done this step just fill the layer with radial gradient using these colors:

![fill](http://www.red-team-design.com/wp-content/uploads/2009/09/fill1.png)

Please note that you are free to use any colors you like, but using these ones you will achieve the same result as mine.So now you should have something like this:

![background](http://www.red-team-design.com/wp-content/uploads/2009/09/background.png)

For the next step create a new layer from the layers palette and fill it with #00b6eb, then(with this layer selected) go to Filter->Render and select  Lighting Effects. Here you can leave the defaults settings like I did or you can play with setting until you achieve something interesting. Set the layer blending to "Overlay" and reduce its opacity to 40%.

![overlay](http://www.red-team-design.com/wp-content/uploads/2009/09/overlay.png)

![lighting](http://www.red-team-design.com/wp-content/uploads/2009/09/lighting.png)

Now it's the part where we add our layers that define the wallpaper. Using the pen tool from the left toolbox start creating a shape like the one bellow:

![first-shape](http://www.red-team-design.com/wp-content/uploads/2009/09/first-shape.png)

If you are encountering any problems with creating this shape you can always check some [tutorials ](http://www.melissaclifton.com/tutorial-pentool.html)with the [Pen Tool](http://psd.tutsplus.com/tutorials/tools-tips/photoshops-pen-tool-the-comprehensive-guide/).

Now that we have this layer we can edit its Blending Options by adding a linear gradient from left to right (-180 degrees angle) and an outer glow:

![styles](http://www.red-team-design.com/wp-content/uploads/2009/09/styles.png)

At this point, using the Pen Tool we'll make a neon-glossy effect  by adding one one more layers filled with white(#ffffff) color and 75% opacity:

![glossy](http://www.red-team-design.com/wp-content/uploads/2009/09/glossy.png)

If you've done all steps your Layers Palette should look like this now:

![layers](http://www.red-team-design.com/wp-content/uploads/2009/09/layers.png)

Duplicate the blue shape layer, and now that we have 2 of a kind select the one under and right-click on it to "Clear Layer Style". Now that we have no blending style applied select Filer->Blur->Gaussian Blur and we will have something like this:

![blur](http://www.red-team-design.com/wp-content/uploads/2009/09/blur.png)

![first-layer](http://www.red-team-design.com/wp-content/uploads/2009/09/first-layer.png)

Next step is adding a nice glowing effect using Pen Tool again and [Stroke Path](http://graphicssoft.about.com/cs/photoshop/ht/apsdotlinepath.htm) this time. First,  the default setting for Pen Tool is to create shapes, this time we will use it to create a path, so you have to select "Paths "  as shown:

![pen](http://www.red-team-design.com/wp-content/uploads/2009/09/pen.png)

Create a new layer,  click on the spot where you want to start the path and to create "round" path click and drag for the next anchor point:

![start-path](http://www.red-team-design.com/wp-content/uploads/2009/09/start-path.png)

Continue doing this until your path will look like this:

![full-path](http://www.red-team-design.com/wp-content/uploads/2009/09/full-path.png)

Select the Brush Tool from the left toolbox and then open the Brush Panel to modify some settings for our brush:

![brush-settings](http://www.red-team-design.com/wp-content/uploads/2009/09/brush-settings.png)

Now you've done all this choose #3aceff color as foreground color and assure you have made the right settings in the Brush Panel: Shape Dynamics and Scattering-these are very important for this step.

If all settings are as in the previous image, select Pen Tool,  right-click on the path you made ,  Stroke Path and check Simulate Pressure box. The result should look like this:

![stroke-path](http://www.red-team-design.com/wp-content/uploads/2009/09/stroke-path.png)

You can now repeat the steps and add extra layers and effects. For this tutorial I continued  to add a green one and a white one:

![all-colors](http://www.red-team-design.com/wp-content/uploads/2009/09/all-colors.png)

For the final touch you can add some stars using custom shape tool. Use a soft rounded 1500px brush to add some green neon  color to background.

![final](http://www.red-team-design.com/wp-content/uploads/2009/09/final.jpg)



[Download wallpaper](http://www.red-team-design.com/wp-content/uploads/2009/09/Neon-wallpaper.zip)

This is the final result of our work. I hope you like it and please feel free to add any comments you may have.
99 changes: 99 additions & 0 deletions _posts/2009-10-23-style-an-input-button.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
---
author: Red
comments: true
date: 2009-10-23 21:34:55+00:00
layout: post
slug: style-an-input-button
title: 'Here’s a quick way to style an input button '
wordpress_id: 103
categories:
- CSS
tags:
- CSS
- design
---

I assume there was at least one time when you wanted to add more appeal to a html input and at that moment you didn't knew how.
We all know how boring looks an input when we use it without styling it and that's why today I will show you the way to get rid of this old-style input.

[![](http://www.red-team-design.com/wp-content/uploads/2009/10/style-button-input.png)](http://www.red-team-design.com/style-an-input-button/)

<!-- more -->

For the beginning here is how a non-styled input looks like:










When styling and input button, we have two alternatives, to style it using only CSS with pout a background image, or using a custom background image.




### 1.Use only css without background image


First add a class or an id to your button. For this tutorial we will add an id because we do not intend to use this kind of button several times into a page:

Now let's add some styles for the id:



#btn
{
border: 1px solid #777777;
background: #6e9e2d;
color: white;
font: bold 11px 'Trebuchet MS';
padding: 4px;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}



The final result looks like this:

![test-button-1](http://www.red-team-design.com/wp-content/uploads/2009/10/test-button-1.png)

Please note that [border-radius](http://www.css3.info/preview/rounded-border/) actually is working only on Mozilla/Firefox, Google Chrome and Safari 3.


### 2.Use a custom background image


Start by creating a new .psd file with 78x28px size. From the left panel choose "Rounded Rectangle Tool" (ALT+U for Windows Users) and set a 4px radius.Fill it with #6e9e2d (green) color and apply some effects.

This is my result and also this is the **[Photoshop source file](http://www.red-team-design.com/wp-content/uploads/2009/10/btn.psd)** (please use it as you wish).



[Download Photoshop FREE source file](http://www.red-team-design.com/wp-content/uploads/2009/10/btn.psd)

![test-button-2](http://www.red-team-design.com/wp-content/uploads/2009/10/test-button-2.png)

Now, back to our code ....this image is 78x28px and we will use it as background image for our input.Here you have the new css code for it.
Note that this time you don't need to use the value attribute anymore.



#btn
{
background: url(test-button-2.png);
cursor: pointer;
width: 78px;
height: 28px;
display: block;
border: none;
}



That's it, i hope you'll find it useful!
106 changes: 106 additions & 0 deletions _posts/2009-11-01-3d-typography-effect.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
---
author: Red
comments: true
date: 2009-11-01 23:01:52+00:00
layout: post
slug: 3d-typography-effect
title: How to create 3D typography effect using Extrude&Bevel
wordpress_id: 149
categories:
- Miscellaneous
tags:
- design
---

In this tutorial you will learn how to achieve the following fancy 3D typography effect using Adobe Illustrator and Adobe Photoshop in just 7 easy steps.

[![](http://www.red-team-design.com/wp-content/uploads/2009/11/3d-typography-effect.png)](http://www.red-team-design.com/3d-typography-effect/)

<!-- more -->


### 1.Open Adobe Illustrator and create a new .ai file:


![new](http://www.red-team-design.com/wp-content/uploads/2009/11/new.png)


### 2.Select the Type Tool(T) and add the "red" text using these settings and the #B3B3B3 color:


![text-settings](http://www.red-team-design.com/wp-content/uploads/2009/11/text-settings.png)

If you don't see the Type window you can bring it to front using the top menu: Window > Type > Character.

This is the result you must achieve. Please note the reduced spacing between the letters.

![red](http://www.red-team-design.com/wp-content/uploads/2009/11/red.png)

To continue customizing this text, right-click on it and select "Create Outlines" to transform the text into editable shapes.

![red-outline](http://www.red-team-design.com/wp-content/uploads/2009/11/red-outline.png)


### 3.Customize the text


First, create a new shape using the Rectangle Tool (M) like in the following example:

![red-shape](http://www.red-team-design.com/wp-content/uploads/2009/11/red-shape.png)

Now with the Pathfinder window activated (Shift+Ctrl+F9 or Window > Pathfinder), select the new square shape and the "e" shape from the "red" text and click on "Minus Front" as showed:

![minus-shape](http://www.red-team-design.com/wp-content/uploads/2009/11/minus-shape.png)

The result after we use the Pathfinder will look like this:

![red-custom](http://www.red-team-design.com/wp-content/uploads/2009/11/red-custom.png)


### 4.Add the "design" text


Note that the type settings are the same as i used for the "red" text, just that in this case the letters are capitalized.

![red-design](http://www.red-team-design.com/wp-content/uploads/2009/11/red-design.png)


### 5.Use the Pathfinder again


Use it as shown earlier to "cut" the "red" text and make it look like this:

![red-design-2](http://www.red-team-design.com/wp-content/uploads/2009/11/red-design-2.png)


### 6.3D Extrude&Bevel


With the "DESIGN" text selected from our layer pallete go to Effects > 3D > Extrude&Bevel and apply these settings:
![3d](http://www.red-team-design.com/wp-content/uploads/2009/11/3d.png)

![3dresult](http://www.red-team-design.com/wp-content/uploads/2009/11/3dresult.png)


### 7.Stylize with Adobe Photoshop


Export the content as .png and open it with Adobe Photoshop. You need now to create custom shapes to add lights and shadows to the design. To do that just select the Pen tool (P) from the left menu and start creating shapes as shown.Select the #ffffff(white) color as background and reduce its opacity to, let's say, 20%.

![lights](http://www.red-team-design.com/wp-content/uploads/2009/11/lights.png)

This should be the result after adding lights:

![typographic-effect-lights](http://www.red-team-design.com/wp-content/uploads/2009/11/typographic-effect-lights.png)

Plus some shadows:

![typographic-effect-shaddow](http://www.red-team-design.com/wp-content/uploads/2009/11/typographic-effect-shaddow.png)

I hope you enjoyed this tutorial. Below you can find the final result.



[Download source files](http://www.red-team-design.com/wp-content/uploads/2009/11/typographic-effect.rar)

![typographic-effect-final](http://www.red-team-design.com/wp-content/uploads/2009/11/typographic-effect-final.png)

0 comments on commit 5222844

Please sign in to comment.