Thursday, December 3, 2009
Sitepoint.com Advent Calendar
I was just recently informed of some great deals being offered by a very trusted source in the web design world. Sitepoint.com is having a 24 days of christmas sale advent calendar, so far the sales have been outstanding! Some of their great books for dirt cheap. We recently picked up a PHP MySQL book for $20 and saved over $50/ Check it out here! http://sale.sitepoint.com/
Wednesday, November 25, 2009
Paging Blogengine Navigation Dropdowns
Recently I was setting up my website redtwindesign.com to run as a CMS with BlogEngine.net. BlogEngine was working because I was able to create pages for my site and use the Html Editor built into the blog application. I created my pages, and then I created my sub pages. This is where I ran into the problem. I could not get the child pages to show under the parent pages, even though I went into the pages section in my settings and specified which page was my parent page. So I did what I usually do and searched for an answer in good old google. This is what I found.
http://www.beyondweblogs.com/post/Custom-design-for-Parent-Child-style-of-defining-pages-in-blogenginenet.aspx
http://www.beyondweblogs.com/post/Custom-design-for-Parent-Child-style-of-defining-pages-in-blogenginenet.aspx
Monday, October 12, 2009
A pretty interesting article about social media and it's effects.
http://www.instigatorblog.com/social-media-lead-conversion/2009/10/12/
http://www.instigatorblog.com/social-media-lead-conversion/2009/10/12/
Saturday, October 3, 2009
IE 6 Space
Recently I was putting together a site for a client that used three divs as the main part of the site. I was trying to keep the code clean and use almost no extra code. The code I used was a div on top with a background image.
However, IE 6 was adding space between all of the divs. So to solve the problem, I extended the bottom of the background image in the top div. Then I extended the top of the background image in the bottom div. Now when IE6 adds the extra space, the background images show in the space and the page doesn't look broken.
However, IE 6 was adding space between all of the divs. So to solve the problem, I extended the bottom of the background image in the top div. Then I extended the top of the background image in the bottom div. Now when IE6 adds the extra space, the background images show in the space and the page doesn't look broken.
Thursday, September 10, 2009
Virtual Box of Joy
I would like to post a very cool open source option to VMWare Fusion and Parallels. It is called Virtual Box http://www.virtualbox.org/. It allows you to open a windows operating system on your mac, and it is free. I have been using it for about a month now and have tested using Visual Studio on it and it seems to work fantastic. I also use it to test my websites on a PC and on a Mac. I installed Windows xp to text in IE6. I never have to go back to my PC, well I have to go back to test in IE 7 and IE 8. If you install the Guest Additions you can access a shared folder from your mac to the PC. It is great. I will put up a tutorial about how to access the shared folder later, because the Virtual Box site gets a little confusing on how to access it.
Sunday, August 23, 2009
My face on Facebook
I recently noticed the Facebook fan box widget. It is pretty cool. I think it is a little big for a page though. Here it is. It appears to be somewhat customizable, but if you change the height in the code it cuts off the window. I put it in a div here with overflow set to auto.
Portage Indiana Graphic Design on Facebook
Saturday, August 1, 2009
Create a Rich Black and White RGB
Today I am going to go through how to make a black and white image from a color photo. Let's get to it. First start with any color image. Here is mine:
The next step is to open the photo in photoshop. I am currently using CS2, mainly because I didn't feel the need to upgrade, but it will still work in CS3 or CS4.
Be sure to convert the image to RGB by Image>Mode>RGB color. This does work in CMYK, but not all of the time. After you have converted the image to RGB open up the Layers Palette by clicking Window>Layers or by clicking F7 on a Mac. At the bottom of the layers palette you have a collection of buttons that allow you to mask your image, duplicate your layer, choose layer styles, and more. There is one button that we are going to use. That is the "Create New Fill or Adjustment Layer" as shown in this picture:
After you click on it a list appears, as pictured above. In this list you will see "Channel Mixer..." Click on this and a Channel Mixer window will show up and also a new Channel Mixer layer is added to the layer palette. As Shown here:
In the Channel Mixer window you will see an Output Channel dropdown at the top, RGB Source Channel sliders in the middle, and a Constant slider at the bottom. You will also see Monochrome selection box at the bottom. Check the Monochrome box and your image becomes black and white. Mess with the sliders and see how your image changes.
Now the fun begins, if you move the Constant slider to the right your image becomes brighter. If you move it to the left it becomes darker. I am going to move mine to the left so the box above the slider reads -8%.
Next I am going to move the green slider to the right to about +138%. Next I am going to move the blue channel to the left to read -4%. Last I am going to move the red channel to the left -18$. If I look at the photo I now have a very rich black and white photo from my RGB photo and it is still in RGB mode.
Some more tricks you can do with this way to create a black and white photo is to hit ok on the Channel Mixer window to save your changes to the photo. Then go back to your layers palette and click on the white box on the Channel Mixer layer (which should already be selected). Next select the selection tool and select part of the image. After you have your selected part click on the brush tool. (Make sure you are still on the Channel Mixer layer and that the white part is selected) Now select the color box at the bottom of the tools palette and make sure your foreground color is black. Start painting in your selection in the photograph. Because you haven't converted the image to black and white the RGB colors are still saved underneath the Channel Mixer layer.
Let's look at the use of changing the image mode to black and white vs. this option. See below:
The next step is to open the photo in photoshop. I am currently using CS2, mainly because I didn't feel the need to upgrade, but it will still work in CS3 or CS4.
Be sure to convert the image to RGB by Image>Mode>RGB color. This does work in CMYK, but not all of the time. After you have converted the image to RGB open up the Layers Palette by clicking Window>Layers or by clicking F7 on a Mac. At the bottom of the layers palette you have a collection of buttons that allow you to mask your image, duplicate your layer, choose layer styles, and more. There is one button that we are going to use. That is the "Create New Fill or Adjustment Layer" as shown in this picture:
After you click on it a list appears, as pictured above. In this list you will see "Channel Mixer..." Click on this and a Channel Mixer window will show up and also a new Channel Mixer layer is added to the layer palette. As Shown here:
In the Channel Mixer window you will see an Output Channel dropdown at the top, RGB Source Channel sliders in the middle, and a Constant slider at the bottom. You will also see Monochrome selection box at the bottom. Check the Monochrome box and your image becomes black and white. Mess with the sliders and see how your image changes.
Now the fun begins, if you move the Constant slider to the right your image becomes brighter. If you move it to the left it becomes darker. I am going to move mine to the left so the box above the slider reads -8%.
Next I am going to move the green slider to the right to about +138%. Next I am going to move the blue channel to the left to read -4%. Last I am going to move the red channel to the left -18$. If I look at the photo I now have a very rich black and white photo from my RGB photo and it is still in RGB mode.
Some more tricks you can do with this way to create a black and white photo is to hit ok on the Channel Mixer window to save your changes to the photo. Then go back to your layers palette and click on the white box on the Channel Mixer layer (which should already be selected). Next select the selection tool and select part of the image. After you have your selected part click on the brush tool. (Make sure you are still on the Channel Mixer layer and that the white part is selected) Now select the color box at the bottom of the tools palette and make sure your foreground color is black. Start painting in your selection in the photograph. Because you haven't converted the image to black and white the RGB colors are still saved underneath the Channel Mixer layer.
Let's look at the use of changing the image mode to black and white vs. this option. See below:
Saturday, July 18, 2009
CSS positioning - relatively exciting
Recently I developed a site with CSS positioning that will work in Visual Web Developer 2008 with the use of master pages. The site design started as a basic header and two column css site (with floats) with no footer because the footer is designed into the right column. This is how I ended up using positioning instead of floats.
I started with the container div in the master page.
Setting the css for the container div to width:800px; and margin:0 auto; to make sure it stayed in the center. I then set the body of the page to margin-top:0; so my container div sat at the very top of the page. I also set everything on the page to padding:0; margin:0; by using:
* {
margin:0;
padding:0;
}
From there I carved out my header div inside the container div.
I set it also to width:800px; and a height of 202px; Inside the header div I placed my logo file with margin:79px 0 19px 19px;.
After the header I developed the mainbody div inside the container div.
I set the mainbody div to 800px;. From there I setup the two column divs inside the mainbody div. The left col div to width:207px; float:left;. When completed with the left column I then created the right column css set to width:593px; float:left;. I then proceeded to place my content (navigation and such) in these areas.
This is where the problem started.
The floats were working, but the divs started to collapse inside each other and I had to decrease the width of the divs inside the columns to make them fit, which meant a lot of design changes. So I decided to go a different route.
I decided to give myself some flexibility.
I decided to use css positioning. I went back to my container div and added position:relative;. My container div now had the css properties of:
#container {
width:800px;
margin:0 auto;
position:relative;
}
From there I decided to make my header positioned absolute inside my container div. So my header css now reads:
.header {
height:202px;
width:800px;
position:absolute;
top:0;
left:0;
}
This positions the header at the top left of the container div. I left the logo in the div and had to make no changes to it.
I then proceeded to make the left column absolute also. I took out the mainbody div because it was not needed any more. My new left column div now has the css:
.leftbody {
width:207px;
top:202px;
left:0;
position:absolute;
}
This positions the left column all the way to the left of the container div and 202px from the top of the container div.
Next came the right column. The right column css was changed to:
.rightbody {
width:603px;
position:absolute;
top:195px;
left:207px;
}
This positions the right column at the exact right of the left column by positioning it left:207px;. It then positions the column at 195px from the top of the container.
Where it gets interesting is for seo purposes I was able to place the code for the right column (.rightbody) first in the source code and it will still be where I want it on the page. If you are thinking of layers however the left column will actually be placed on top of the right column, but since they are not placed over each other they won't overlap.
The layering aspect did help though because in the header section I had not placed any of the photos I will be placing. Behind the logo there is a faded color wheel and next to that there will be photos. So I was able to place the div for the color wheel at the top behind everything. Here is the css:
#colorcircle {
position:absolute;
left:-77px;
top:0;
}
This positions the div actually outside of the container div to the left at 77px. What is cool is my main container div actually says 800px wide and the browser still reads the edge of the page at the left and right edge of the container.
Then comes in the rotating photo div, which will also include jquery to rotate through images. Here is the css:
#rotatingimages {
position:absolute;
left:270px;
top: 0px;
}
The images are at a width of 600px but overlap the color wheel at 270px from the left of the container div. So this positions the right side of the images outside of the container div about 70px. It is also positioned above the color wheel because it is written after the color wheel in the source code.
Here is the source code broken down:
div id="container"
div id="colorcircle"
div id="rotatingimages"
div class="header"
div class="rightbody"
div class="leftbody"
/div
Here is the css broken down:
#container {
margin:0 auto;
width:800px;
position:relative;
}
#colorcircle {
position:absolute;
left:-77px;
top:0;
}
#rotatingimages {
position:absolute;
left:270px;
top: 0px;
}
.header {
height:202px;
min-height:202px;
width:800px;
position:absolute;
top:0;
left:0;
}
.rightbody {
width:603px;
position:absolute;
top:195px;
left:207px;
}
.leftbody {
width:207px;
top:202px;
position:absolute;
left:0;
}
The header div was taken out and the logo itself was css positioned to cut down on source code. Also z-index could have been used to layer items over each other and move the right column all the way to the top in the source code.
I started with the container div in the master page.
Setting the css for the container div to width:800px; and margin:0 auto; to make sure it stayed in the center. I then set the body of the page to margin-top:0; so my container div sat at the very top of the page. I also set everything on the page to padding:0; margin:0; by using:
* {
margin:0;
padding:0;
}
From there I carved out my header div inside the container div.
I set it also to width:800px; and a height of 202px; Inside the header div I placed my logo file with margin:79px 0 19px 19px;.
After the header I developed the mainbody div inside the container div.
I set the mainbody div to 800px;. From there I setup the two column divs inside the mainbody div. The left col div to width:207px; float:left;. When completed with the left column I then created the right column css set to width:593px; float:left;. I then proceeded to place my content (navigation and such) in these areas.
This is where the problem started.
The floats were working, but the divs started to collapse inside each other and I had to decrease the width of the divs inside the columns to make them fit, which meant a lot of design changes. So I decided to go a different route.
I decided to give myself some flexibility.
I decided to use css positioning. I went back to my container div and added position:relative;. My container div now had the css properties of:
#container {
width:800px;
margin:0 auto;
position:relative;
}
From there I decided to make my header positioned absolute inside my container div. So my header css now reads:
.header {
height:202px;
width:800px;
position:absolute;
top:0;
left:0;
}
This positions the header at the top left of the container div. I left the logo in the div and had to make no changes to it.
I then proceeded to make the left column absolute also. I took out the mainbody div because it was not needed any more. My new left column div now has the css:
.leftbody {
width:207px;
top:202px;
left:0;
position:absolute;
}
This positions the left column all the way to the left of the container div and 202px from the top of the container div.
Next came the right column. The right column css was changed to:
.rightbody {
width:603px;
position:absolute;
top:195px;
left:207px;
}
This positions the right column at the exact right of the left column by positioning it left:207px;. It then positions the column at 195px from the top of the container.
Where it gets interesting is for seo purposes I was able to place the code for the right column (.rightbody) first in the source code and it will still be where I want it on the page. If you are thinking of layers however the left column will actually be placed on top of the right column, but since they are not placed over each other they won't overlap.
The layering aspect did help though because in the header section I had not placed any of the photos I will be placing. Behind the logo there is a faded color wheel and next to that there will be photos. So I was able to place the div for the color wheel at the top behind everything. Here is the css:
#colorcircle {
position:absolute;
left:-77px;
top:0;
}
This positions the div actually outside of the container div to the left at 77px. What is cool is my main container div actually says 800px wide and the browser still reads the edge of the page at the left and right edge of the container.
Then comes in the rotating photo div, which will also include jquery to rotate through images. Here is the css:
#rotatingimages {
position:absolute;
left:270px;
top: 0px;
}
The images are at a width of 600px but overlap the color wheel at 270px from the left of the container div. So this positions the right side of the images outside of the container div about 70px. It is also positioned above the color wheel because it is written after the color wheel in the source code.
Here is the source code broken down:
div id="container"
div id="colorcircle"
div id="rotatingimages"
div class="header"
div class="rightbody"
div class="leftbody"
/div
Here is the css broken down:
#container {
margin:0 auto;
width:800px;
position:relative;
}
#colorcircle {
position:absolute;
left:-77px;
top:0;
}
#rotatingimages {
position:absolute;
left:270px;
top: 0px;
}
.header {
height:202px;
min-height:202px;
width:800px;
position:absolute;
top:0;
left:0;
}
.rightbody {
width:603px;
position:absolute;
top:195px;
left:207px;
}
.leftbody {
width:207px;
top:202px;
position:absolute;
left:0;
}
The header div was taken out and the logo itself was css positioned to cut down on source code. Also z-index could have been used to layer items over each other and move the right column all the way to the top in the source code.
Tuesday, July 7, 2009
My LomoHome
Here is a glimpse into my lomohome at the new lomography.com site
http://www.lomography.com/homes/cre8ivrob
http://www.lomography.com/homes/cre8ivrob
Wednesday, May 13, 2009
Razorfish - Andrea Harrison on New Consumer Insights: Social Behavior
Check out this SlideShare Presentation:
Sunday, April 19, 2009
Holga Camera
I have found out a way to show you my Holga Home on http://www.lomography.com. Here is the link to my "lomohome" http://www.lomohomes.com/cre8ivrob
I will be honest the photos that look like they were overlapped, are overlapped. I wish I could say that they were done on purpose, but it was really an accident. What happened is this, I put 35mm film into the camera with some modifications and didn't realize how much I had to wind the film to get a new shot. I realize now that is about 29 clicks to get to the next shot without overlapping and double exposing the film. Even though the overlapping was an accident I am still extremely proud of the shots. I also learned that the red shot number window in the back of the camera actually lets in a lot of light. That is the red block in the shots. I originally used masking tape to cover the window, but that isn't enough. You actually have to use the black electrical tape they give you with the camera. I used the black tape when shooting at the White Sox game. and no light came in.
The film was developed at Walgreens, but I need to scan the negatives because the pictures that were developed did not get the whole shot. This is because it is hard to tell where the shots end and begin. To get the right shot is just a matter of scanning the film the right way and printing out the shots the way they are supposed to look.
Here are a couple shots:
I will be honest the photos that look like they were overlapped, are overlapped. I wish I could say that they were done on purpose, but it was really an accident. What happened is this, I put 35mm film into the camera with some modifications and didn't realize how much I had to wind the film to get a new shot. I realize now that is about 29 clicks to get to the next shot without overlapping and double exposing the film. Even though the overlapping was an accident I am still extremely proud of the shots. I also learned that the red shot number window in the back of the camera actually lets in a lot of light. That is the red block in the shots. I originally used masking tape to cover the window, but that isn't enough. You actually have to use the black electrical tape they give you with the camera. I used the black tape when shooting at the White Sox game. and no light came in.
The film was developed at Walgreens, but I need to scan the negatives because the pictures that were developed did not get the whole shot. This is because it is hard to tell where the shots end and begin. To get the right shot is just a matter of scanning the film the right way and printing out the shots the way they are supposed to look.
Here are a couple shots:
Wednesday, April 8, 2009
HOLGA
Recently I was given a really cool gift from my brother for my 30th birthday. It is a Holga Camera. You can read more about the Holga here. www.lomography.com/holga/ It is a really cool camera. It is made of nothing but plastic (even the lens), is completely manual, and takes amazing photos. The Holga I have is the 120 CFN. It has a flash with 4 color filters, white, red, blue and yellow. I have shot a roll of 120 film already, which is what it actually shoots on, testing overlapping and using the flash with the four filters. Right now I have modified the camera to shoot 35mm film. The camera is known for it's light leaks which change the look of your photos. I am excited to see what comes out of the rolls. I will post my photos to this blog when I get a roll developed.
Friday, February 13, 2009
PROBLEM: Flash movie hiding .net menu
SOLUTION: wmode
A colleague and I came across an issue with a site that uses a .net menu with sub nav fly-outs and a flash movie.
The problem is that the flash movie was loading and playing on top of the .net menu. After racking our brains for a while, I decided to try some code that is usually used to show the transparency of a flash movie in a web page.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="400" title="histmovie">
<param name="movie" value="main.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed wmode="transparent" src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="400"></embed>
</object>
This code allows you to make an image used in the background of your page visible if you have alpha transparency or empty spaces in your flash movie for example. Now the .net menu's fly-outs appear above the flash movie.
My colleague also had a very similar problem with Mediaplayer. This is his blog with his solution to that problem.
http://www.lynchtek.com/blog/post/2009/02/13/mediaplayer-visual-studio-dotnet-menu.aspx
A colleague and I came across an issue with a site that uses a .net menu with sub nav fly-outs and a flash movie.
The problem is that the flash movie was loading and playing on top of the .net menu. After racking our brains for a while, I decided to try some code that is usually used to show the transparency of a flash movie in a web page.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="400" title="histmovie">
<param name="movie" value="main.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed wmode="transparent" src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="400"></embed>
</object>
This code allows you to make an image used in the background of your page visible if you have alpha transparency or empty spaces in your flash movie for example. Now the .net menu's fly-outs appear above the flash movie.
My colleague also had a very similar problem with Mediaplayer. This is his blog with his solution to that problem.
http://www.lynchtek.com/blog/post/2009/02/13/mediaplayer-visual-studio-dotnet-menu.aspx
Sunday, February 8, 2009
A blog about the work I do and the things I learn along the way
Graphic Design
–noun
the art or profession of visual communication that combines images, words, and ideas to convey information to an audience, esp. to produce a specific effect.
"graphic design." Dictionary.com Unabridged (v 1.1). Random House, Inc. 08 Feb. 2009..
I am a graphic designer. My daily responsibilities include producing traditional and web marketing materials with the ultimate goal of producing results for my clients. My job is never the same and there is always something new to learn and accomplish.
This blog will be about what I learn and what I know as a graphic designer. I will provide tips and insights about everything from producing ads to using cascading style sheets. Posts will also cover my ventures into other technologies and techniques.
See you soon!
–noun
the art or profession of visual communication that combines images, words, and ideas to convey information to an audience, esp. to produce a specific effect.
"graphic design." Dictionary.com Unabridged (v 1.1). Random House, Inc. 08 Feb. 2009.
I am a graphic designer. My daily responsibilities include producing traditional and web marketing materials with the ultimate goal of producing results for my clients. My job is never the same and there is always something new to learn and accomplish.
This blog will be about what I learn and what I know as a graphic designer. I will provide tips and insights about everything from producing ads to using cascading style sheets. Posts will also cover my ventures into other technologies and techniques.
See you soon!
Subscribe to:
Comments (Atom)
Posts
