AdapterProgram

How to Set up and Configure PHP 5 & Apache on Windows

How you can Set up along with Configure PHP 5 to operate along with Apache upon Glass windows

http://www.adapterprogram.com/wp-content/uploads/2016/05/aid345362-728px-Install-and-Configure-Php-5.2.5-and-Apache-2.2.8-in-Windows-Vista-Step-1Bullet2.jpg

Many web designers want to operate Apache along with PHP on their own computer given it permits the crooks to easily test out their own scripts along with programs before many people placed all of them “live” on the internet. This article gives a comprehensive guideline upon ways to deploy along with configure PHP5 to function together with the Apache HTTP Server upon Glass windows. The method continues to be tested to function upon each Or windows 7 along with Vista.

When you have definitely not currently mounted Apache on your equipment, have a look at on the list of courses down the page. That “How To” guideline thinks that you’ve currently concluded putting in Apache.

If you are using Apache 1. 3. times, start to see the guideline How you can Set up this Apache Net Server 1. times upon Glass windows.

In the event you want to work with on the list of Apache a couple of or even a couple of. a couple of world wide web hosting space upon Or windows 7, start to see the guide How you can Set up along with Configure Apache a couple of upon Glass windows as a substitute.

If you are using Apache a couple of. a couple of upon Glass windows Vista, you need to study How you can Set up Apache a couple of. a couple of upon Glass windows Vista.

Observe: those about to deploy PHP 4 upon Apache 1. times must study our write-up How you can Set up along with Configure PHP4 to operate along with Apache upon Glass windows as a substitute.

Methods in order to Establishing PHP 5
Obtain PHP 5
Before even thinking about, obtain a content associated with PHP 5 from your PHP down load webpage. Specifically, down load this VC6 thread-safe go deal from your “Windows Binaries” portion — that is certainly, aren’t getting this installation technician. For instance, choose the deal branded “PHP 5. a couple of. 5 go package” when 5. a couple of. 5 could be the recent model.

[Update: realize that I’ve definitely not tested the process beneath along with one of the PHP 5. 3 variations, only along with 5. a couple of. 5, that is the modern model back then My spouse and i initially composed this particular. The theory is that, the process must work with later on 5. a couple of variations too. I’m unsure with regards to 5. 3 though. A new model jump by 5. a couple of in order to 5. 3 translates to larger alterations when compared with straightforward annoy repairs. If you wish to be certain the process beneath works, merely obtain the most recent in the 5. a couple of collection. ]

Set up PHP 5
Make a folder on your drive with regard to PHP. I would recommend “c: \php” though you should utilize some other labels if you want. Professionally though, I prefer avoiding labels along with places from it, such as “c: \Program Files\php” avoiding possible difficulty with programs that will cannot take care of might be found. Let me assume which you utilized g: \php with this guide.

Extract each of the data files from your go deal directly into that will folder. To accomplish this just double-click this go report in order to available it, along with get each of the data files along with version in order to g: \php.

Upgraders: Eliminate the Outdated PHP. INI Data file through your Glass windows Listing
Should you be replacing in order to PHP 5 by a mature model, visit ones house windows directory site, normally g: \windows, along with erase just about any php. ini report that you’ve recently located presently there.

Setting up PHP
See a g: \php folder along with complete a content in the report “php. ini-recommended”. Identify the modern report “php. ini”. That is, you should will have the report “c: \php\php. ini”, identical inside pleased with “c: \php\php. ini-recommended”.

Observe: if you work with Apache 1, you should often go this php. ini report on your house windows directory site, “C: \Windows” of all methods, or even configure the journey surroundings changing to incorporate “c: \php”. If you don’t know how to do this other, merely go this php. ini report towards “c: \windows” folder. You don’t need to to make this happen if you work with Apache a couple of, given that many of us will incorporate the directive later on inside the Apache a couple of settings report in order to stipulate the place in the php. ini report.

Work with a great ASCII word manager (such while Notepad, that exist inside the Components folder of the Start menu) in order to available “php. ini”. You may need to help to make the following alterations towards report, depending on the needs you have:

Enable Small Wide open Labels
Search for this brand that will states:

Wonder Prices
Automatically, suggestions files just isn’t fled from along with backslashes. That is, but if your readers key in a great inverted comma (single quote) directly into ones world wide web variety, this screenplay will probably get that will unadorned inverted comma (single quote). That is typically attractive if you have particular demands. If you’d like ones suggestions files to achieve the backslash (“\”) prefix, like, one example is, in order to simulate ones world wide web host’s settings, look for the following:

Sign up Globals
A number of old scripts assume that most files sent with a variety will probably routinely use a PHP changing in the very same label. For instance, but if your variety posseses an suggestions subject having a label associated with “something”, old PHP scripts assume that this PHP model will probably routinely make a changing called $something which has the worthiness occur that will subject.

Should you be running this kind of scripts, you will need to search for the following subject:

How you can Configure Apache with regard to PHP 5
There are a couple approaches to put together Apache make use of PHP: the first is in order to configure it in order to insert this PHP interpreter for Apache element. The second is in order to configure it to operate this interpreter as a CGI binary. Let me offer data with regard to ways to obtain each, but you must only put into action one of those techniques. Pick the element method but if your service provider additionally mounted PHP for Apache element, along with operate the CGI method when they have put in place it to operate as a CGI binary.

Running PHP 5 for Apache Module
To be able to configure Apache in order to insert PHP as a element in order to parse ones PHP scripts, work with a great ASCII word manager in order to available this Apache settings report, “httpd. conf”. If you are using Apache 1. times, this report is situated in “c: \Program Files\Apache Group\Apache\conf\”. Apache a couple of. 0. times people will get it inside “C: \Program Files\Apache Group\Apache2\conf\” while Apache a couple of. a couple of. times people will get it inside “C: \Program Files\Apache Software program Foundation\Apache2. 2\conf\”. Generally, it truly is inside the “conf” folder associated with where ever you mounted Apache.

Search for this area of this report with a number of “LoadModule” assertions. Assertions prefixed from the hash “#” warning usually are regarded as having already been commented away.

Reboot this Apache Net Server
Reboot ones Apache server. That is essential because Apache has to browse the fresh settings directives with regard to PHP that you’ve located to the httpd. conf report. Your Apache a couple of. a couple of server is usually restarted by means of doubleclicking this Apache Program Observe technique plate tattoo, and once this window shows up, simply clicking this “Restart” press button.

Testing Your current PHP Installment

Save this report while “test. php” or even any other label which you elegant, yet with all the inches. php” off shoot, directly into ones Apache htdocs directory site. If you are using Notepad, be sure you save while “test. php” with all the prices, or even it will probably give a inches. txt” off shoot powering ones rear.

Wide open ones web browser along with admittance this report by means of typing “localhost/test. php” (without this quotes) directly into ones browser’s address pub. Tend not to available this report entirely on this drive — you are going to only start to see the text you typed in previously. You need to use the above mentined WEB SITE in order that the web browser will endeavour to reach ones Apache world wide web server, which inturn runs PHP in order to translate ones screenplay.

When most goes well, you should view a pageful associated with information regarding ones PHP setup. How exciting — you could have successfully mounted PHP along with set up Apache to cooperate with it. You are able to distribute this particular very same report, test out. php, on your service provider along with operate it presently there to find out just how ones service provider provides set up his PHP, to be able to simulate it by yourself equipment.

When for reasons uknown it does not function, confirm whether ones PHP setup or even ones Apache setup is actually producing the issue. To make this happen, available the Demand Induce window (found inside the “Accessories” folder of the “Start” menu) along with operate php-cgi. exe upon test out. php having a order brand such as “c: \php\php-cgi test out. php” (without this quotes).

When invoking PHP from your order brand causes a big HTML report considering the PHP settings data to be displayed, your PHP set up is okay. The condition likely is placed using your Apache settings. Make certain you have restarted this Apache server following creating settings alterations. Confirm that you’ve set up Apache properly by means of overlooking, yet again, this recommendations about this webpage as well as the methods presented inside How you can Set up along with Configure Apache 1. times with regard to Glass windows (for Apache 1. times users), How you can Set up along with Configure Apache a couple of upon Glass windows (for Apache a couple of. times people upon Glass windows XP) or even How you can Set up Apache a couple of. a couple of upon Glass windows Vista (for Apache a couple of. a couple of. times upon Glass windows Vista along with above).

Read More

Hungry Shark World Tutorial

Feast on everything in sight and experience life as the king of the sea in Hungry Shark World, a graphic adventure mobile game. Bare those powerful jaws as you chomp your way from an entry-level shark to a big and menacing great white. With incredibly easy controls and addictive gameplay, be ready to spend countless hours underneath the deep blue sea. Download Hungry Shark World on your mobile phones now.

http://www.adapterprogram.com/wp-content/uploads/2016/05/screen480x480.jpeg

Test of Survival

There is a long list of adventure games in the market, but there’s nothing quite like Hungry Shark World, where you take on the role of a starving shark out to prey on anything and everything that stands in its way.

This 3D gamefrom the Future of Games London is an ultimate test of survival underwater. Your ultimate goalis to stay alive by feeding on all types of marine life underneath or on unsuspecting vacationers and scuba divers on the surface of the sea. As you eat, you get a chanceto increase your size and evolve into one of the more powerful types of sharks.

Aside from keeping yourself stuffed at all times, there are at least 50 missions to unlock, which varies on what type of shark you choose to evolve to, and countless of treasure chests to locate which would give you big rewards.

You can control your shark in two ways: by tilting your phone towards you desired direction or by simple tapping your screen. You just have to choose which method you’re most comfortable with.

HSW which is available on iOS and Android devices such as phones and tablets, delivers on both sight and sounds as it hooks you in with its smooth animation, top notch depiction of the vast ocean and the realistic cries for help from the human preys.

A bloody feeding Frenzy

You depend largely on your health in your entire quest.A meter located on the bottom right part of your screen indicates your health.If you fail to feed your fish for a long interval or get attacked by those marine organisms that are bold enough to fight a shark, you will sink to your death.

A shark may be the most menacing creature in the ocean, but you are still dependent on those little creatures for sustenance. You have to gobble down different types of fish like tuna and sardines, giant crabs, and turtles continuously in order to avoid starving. If you’re lucky, you can startle innocent swimmers or bystanders by taking one big bite at their bodies.

But beware, because not every marine being will back down at the sight of your sharp pearly whites. Sting rays, jelly fish, and blowfish will hurt your shark in just sting, especially in the earlier parts of the game. There are also floating mines and humans armed with knives that you have to steer away from. Get tips and Hungry Shark world hack to get resources.

Shark World

Each time you feed, especially during an event called the “Gold Rush,” you are rewarded with coins, which is the basic currency in the game. You can use these coins to purchase items and accessories, or unlock the stronger types of sharks available in this game,

Sure, they all look the same like they always just want to gobble you up alive, but there are actually different types of sharks — made distinct by their appearances and capabilities.

A Reef shark, the default avatar in the game, is the smallest and weakest among all. They only prey on small fishes and can by killed easily by a single sting of the blowfish. A Mako shark, slightly more powerful and can grow bigger than the reef shark, costs 1,500 to unlock. AHammerhead shark, which costs 6,000, boasts of moderate power, large mouth, and extensive boost meter. A Tiger Shark, which can be acquired with 15,000 coins, is an extremely durable and powerful creature with high health.

Read More

Optimizing Border-Radius for different browsers

If you were being to produce a rectangle-shaped pack format around the content material on the web page utilizing Cascading Design Bed sheets (CSS), the default is that the pack region will have indicated right-angled edges. To have round edges to the pack, a lot of website owners before have got resorted in order to utilizing photographs to present the look associated with steep edges. This article helps guide you to own exact same impact utilizing CSS. In addition, it looks at a lot of the limits in order to utilizing CSS for this function currently.

That’s This article Regarding?
This article is created regarding an individual whom appreciates how to perform immediately together with HTML in addition to CSS signal. You don’t have to be an expert with possibly HTML or perhaps CSS to know this post, although you must know the basic principles, otherwise there’s a chance you’re shed while i begin referring to CSS rules in addition to qualities.

Without a website, and are also scanning this document simply just to have the really feel associated with issues, you need to start by looking at Learning to make / Create Your own Web page: The Beginner’s A-Z Manual as an alternative. The other is created with ordinary The english language, and is also a lot better to the starter.

Spherical Sides Employing CSS 3′s Border-Radius
The CSS house regarding developing round edges is called border-radius. It truly is section of CSS Stage 3, which during the time this post is created, remains to be with it is “Working Draft”, and thus the item will never be previously followed as being a normal however. Although it will never be officially standard (“standardized” in certain alternatives associated with English), the home appears to be have been completely carried out in this variations associated with Safari, Opera in addition to Firefox. Maybe moreover (since they’ve such a massive cell phone browser share), ‘microsoft’ has also involved assistance for doing this with Ie 9 (“IE9″) in addition to in the future.

We will consider a case in point pack using the border-radius house (below).

As “radius” implies, CSS imagines that the curve is section of a great ellipse, that’s, a great oval or maybe a range. Since i solely supplied 1 price over, the cell phone browser pulls any spherical arc having a radius associated with 20 pixels for every corner from the pack. The photo below demonstrates the most notable right corner from the pack, while using the radius designated.

Observe: even though Firefox version 3. 6. 8 helps such things as elliptical region (the oval-shaped edges talked about earlier) using the exact same notation (two prices divided with the slash persona, “/”), sooner variations (I imagine prior to 3. 5) don’t. Additionally, attempt to avoid utilizing fraction seeing that the system associated with dimension here, since it is construed in a different way within the early on variations associated with Firefox. Needless to say if you do not really cherish encouraging this kind of aged variations, then you can certainly merely utilize exact same prices to the Firefox-specific qualities while utilizing to the normal CSS qualities, with no limits.

However the present version associated with Firefox helps border-radius, more aged variations add their particular amazing equivalents, termed -webkit-border-radius. The person edges can also be custom separately together with:

What about Ie 8 in addition to Down below?
Ie 8 in addition to sooner doesn’t need any kind of assistance regarding border-radius in different kind, whether within the normal CSS 3 version or perhaps by making use of any amazing tip including with Firefox. As such, for anyone who is really motivated to have round edges on your cardboard boxes for all those web browsers in use, you have got to uncover one more approach to get it done (eg, utilizing images).

Alternatively, in case you are prepared to skimp a lttle bit, plus your web-site’s image design is enough accommodating in order to make room for well-defined perimeters, you can apply just what I at this time carry out together with thesitewizard. com’s website: carry out the rules just for people web browsers of which assistance the item. Visitors utilizing different web browsers will probably simply just visit a frequent rectangle-shaped pack. I realize it isn’t a great option, although unless of course you happen to be well prepared to set up far more perform utilizing photographs, it will eventually need to do.

Summary
It truly is by now feasible to create round edges on your cardboard boxes solely utilizing CSS (without images) that can perform in several web browsers these days. For anyone who is definitely not an individual whom wants to muck around together with reducing in addition to splicing photographs on your round edges, the above mentined technique is one fashion to have the exact same impact together with hardly any effort.

Read More

How To Tweet More Than 140 Characters

Today I Will Tell You ” How To Tweet More Than 140 Characters “

Twitter The Number 2 Biggest Social Network , Have Billions Of Users , Almost All Celebrities Use Twitter .

Most of the time, a hundred and forty characters are enough for an honest tweet. If you are like Maine tho’, you cannot perpetually string along a coherent thought in this quantity of area.

Write Long Tweets on Twitter. Tall Tweets helps you to write tweets that area unit longer than one hundred forty characters. The tool can also take slice and publish your “long tweet” into multiple chunks of one hundred forty characters otherwise you will even publish the whole message as a picture during a single tweet

The Best Tool For that Is Twenth :

More concerning Twenth…

Thousands of individuals area unit mistreatment Twenth a day to send tweets longer than a hundred and forty characters. With over one,000,000 tweets sent worldwide, is not it time you became a part of the conversation?
Twenth may be a FREE tool that permits you to send tweets longer than the a hundred and forty character limit Twitter has obligatory on USA all.

Twenth is 100 percent free and continuously are going to be. we have a tendency to use fashionable technologies and our web site is totally mobile friendly.
Their web site is totally mobile friendly – which means you’ll be able to use Twenth on your mobile browser whereas you are on the move.

Read More

Step to create your standards-compliant internet sites

In this article, we’re going to layout as well as rule each of our initial web site with basic, simple steps. This kind of article ended up being created for your rookie with the expectation so it will provide you with the various tools to create your standards-compliant internet sites! It really is a whole new 7 days; possibly it can be time for it to understand a new skill!

http://www.adapterprogram.com/wp-content/uploads/2016/05/accessibility.jpg

Action 1 — Precisely what We’ve been Making

We’ll layout as well as rule that really easy web site. Magnificent layout, it isn’t really, but it will be really efficient regarding coaching basic coding strategies.

2 — Getting ready

What you need

This kind of article ended up being created let’s assume that you’ve got certainly not coded an internet site . previous to, or even get only carried out the idea a few times. Even so, to complete that article, you will require the next:

Photoshop or maybe a identical image manager
Some sort of rule manager (more about that will later)
Simple comprehension of the way html performs, basic format as well as tag words. To acquire up to speed, investigate recognized useful resource on w3 Educational institutions, which you could understand all the principles meant for that article.
It’s the same regarding css, you should appreciate how selectors perform as well as recognize basic qualities. Once again, the most effective useful resource suggestions w3 Educational institutions
Some sort of web browser, naturally. I am just applying Opera, as well as if you’d like your website to look just like our screenshots with every single stage, you should way too
Design

We’ve been generating a brilliant web site the following, having several basic components: header, content, sidebar as well as footer, the actual design will glimpse such as that:

It’s a wise idea in order to block out the actual design of the layout before you start, both on paper or even with Photoshop, in order to improve the look of your own workflow as well as coordinate your thinking.

Step 3 — Starting

Available some sort of glistening, new Photoshop record, claim, 1000px through 1200px. We can generally harvest the idea later. I am just turning it into quite small because I am just taking care of some sort of laptop the following, but think free to proceed bigger if you appreciate much more room to be effective.

Right now, I am just not likely to type in the debate with regards to display screen file sizes as well as optimum web site wider the following. Almost all you must know is actually that the content individuals web page will be 800px broad, which that is certainly fine. And so, about each of our 1000px broad record, we’re going to lug with manuals at the 100 as well as 900px marks to line the actual wider. Our layout carries a sidebar, as well as I’ve truly chose to ensure it is a third the actual wider from the web page. 2 thirds regarding 400 is concerning 530, therefore let’s put in place another manual on 630px. We will furthermore established a pleasant track record shade.

Step 4 — Header

Pick up the actual rectangle application as well as pull a major, blue container over the rest the actual record, quarry is concerning 170px excessive and also the shade is actually #23b6eb. Subsequent pull some sort of lanky, black grey club at the very top from the web page, I employed white-colored.

Phase 5 — Identify

Right now we’re going to include a lighting influence on the actual blue header spot. Build a cutting disguise preceding the actual blue level, and then Pick up a major, delicate clean (400px wide) as well as pick a shade a lttle bit lighter compared to blue track record.

Right now lightly click on the suggestion from the clean proper down below the actual club, throughout the center from the record. Maintain the idea simple, as well as do not let the lighter shade achieve the actual edges from the web page (this will be obvious later). As well as established the actual mixing method in order to display screen.

Phase 6 — Routing Bar

Right now we’re going to include yet another club on the bottom part from the blue just one, many of us can make it grey, but we’re going to squeeze in a gradient overlay so it will not really issue.

From the level variations solar panel, squeeze in a gradient through black color.

Phase 7 — Footer

Subsequent, let’s pull some sort of grey container in the bottoom from the web page, I picked out some sort of shade a lttle bit richer compared to grey through the club at the top

Phase 8 — Logo

Qualifications

For your logo design, we’re going to pull some sort of rectangle as well as include yet another anchor level towards the end, and then lug the idea out and about to the side. To lose the actual rounding, option-click around the level.

CSS Approval

Go to The actual w3 CSS Validator as well as feel the same practice much like the actual html, only these times pick out your look. css file. Examining…

We’ve been Appropriate!

Nevertheless, many of us did get a couple safety measures. To remain in the very good graces from the religious organization, we should absolutely pay attention to these individuals:

It really is just a couple of little troubles: we should get announced widths for all each of our floated items. Once again, these types of ideas are elective, but you need to focus on constructive criticisms.
Clearing up: each of our tagline, menus unordered record items, as well as sidebar all must have widths announced. We furthermore need to do that without having altering the appearance from the web page.
Very first way up, the actual tagline. We can merely complete a abrasive imagine for this just one, it can be with regards to 400px broad.

As well as reload: no transform, excellent. Subsequent, the actual menus record items. this is the little harder: Our web page is actually 800px broad, therefore this is the optimum total wider of all the so-called record items together. In the event many of us divide from the several record items, as well as established the actual wider in order to 200px, the items get confused as well as record vertically. The reason being we have now extra padding about both side of each and every record items: 30px around the left as well as 75px around the proper. Subtract that will 105 through 2 hundred, and also the remaining wider is actually 95px.

Identical notion with the sidebar: let’s initial check out the actual wider from the content spot: 510px. The others in our 800px web page is actually 290px, but initial we need to take away all the extra padding around the left as well as proper: 290-30=260. Subsequent take away the actual left margin, as well as we have been left having 205px. A single very last problem: each of our 1px edge, therefore let’s take away yet another 2px, as well as established the actual wider from the sidebar in order to 203px. Examine the idea once again, no transform.

Fantastic, if many of us validate once again, no problems, even if it’s just some sort of forewarning!
Our web page, as far as w3c criteria are worried, is perfect.

Finish

And so at this time there you might have the idea, just one really easy, well-coded web site. Through that article, our hope is actually which you selected some important skills to put on on your individual patterns, and they are now ready to get started coding your web sites.

Read More

Create a Stacked Calendar Widget With Photoshop

A very common thing on websites is a calendar widget. They can be used as event calendars, date pickers, booking calendars, etc. In this tutorial, I’ll walk you through the step-by-step process of creating a stacked calendar widget withPhotoshop. We’ll be using shape tools and several blending options to achieve the final result. Let’s get started!


Assets used in this tutorial:

  • Arrows (Custom Shapes)

Step 1: Create a New Document

Open Photoshop and go to File > New (or CTRL+N) to create a new document. I will be creating a 400 pixels x 400 pixels document at 72 pixels/inch resolution. Color Mode: RGB 8 bit. Background Contents: Transparent.

Create a Stacked Calendar Widget With Photoshop | Step 1

After this is created we need to go to Edit > Fill > Color.. set color to #FFFFFF and click OK to fill the background with white.


Step 2: Creating the Month Navigation

Before we begin creating the month navigation let’s make sure we keep our layers organized in groups so click Create a New Group at the bottom of the layers palette, then double click the group and name it Month Navigation.

Create a Stacked Calendar Widget With Photoshop | Step 2a

Using the Rectangle Tool now draw out a rectangle of 274px by 44px and name it month-base. This will be the background to our month navigation.

Create a Stacked Calendar Widget With Photoshop | Step 2b

Next we will right click the month-base layer and go to Blending Options.. We will now add some style to it using the settings below..

Stroke – Size: 1px, Position: Inside, Color: #0966b6

Create a Stacked Calendar Widget With Photoshop | Step 2c

Inner Shadow – Blend Mode: Normal #44a2f3, Opacity: 100%, Angle: 90, Distance: 2px, Choke: 0%, Size: 0px

Create a Stacked Calendar Widget With Photoshop | Step 2d

Gradient Overlay – Blend Mode: Normal, Opacity: 100%, Gradient: Location 0% – Color #0966b6 | Location 49% – Color #0966b6 | Location 50% – Color #1671bf | Location 100% – Color #1b81d8, Angle: 90

Create a Stacked Calendar Widget With Photoshop | Step 2e

Next we will create the active month text so using the Horizontal Type Tool write out July 2013 with Font-Family: Helvetica Neue LT Pro (use Arial if you don’t have it), Font-Style: Bold, Font-size: 18px. Then center it with the month-base layer.

Create a Stacked Calendar Widget With Photoshop | Step 2f

Next we will create the previous and next month buttons on the left and right side. First we need to create another group inside of Month Navigation and name it Previous Month. Using the Custom Shape Tool now use the dropdown arrows to Load Shapes and choose the Arrows.csh included in the assets at the beginning of this tutorial.

Create a Stacked Calendar Widget With Photoshop | Step 2g

Now select arrow 140 and while holding SHIFT create an 8px by 10px arrow. Move it 15px from the left side and center it vertically.

Create a Stacked Calendar Widget With Photoshop | Step 2h

Right click the arrow layer now and go to Blending Options.. We’re going to give it a Drop Shadow now using these settings:

Blend Mode: Normal #094f8c, Opacity: 100%, Angle: 30, Distance: 1px, Spread 0%, Size: 0px

Create a Stacked Calendar Widget With Photoshop | Step 2i

Next we need to create the bevel to right of the arrow. So while holding CTRL hit + a couple times to zoom in. Then with the Line Tool selected hold SHIFT and draw a 42px horizontal line. Name it bevel-dark and move it 15px from the arrow.

Create a Stacked Calendar Widget With Photoshop | Step 2j

Right click the bevel-dark layer now and go to Blending Options.. We’re going to give it a Gradient Overlay using these settings:

Blend Mode: Normal, Opacity: 100%, Gradient: Location 0% – Color #085496 | Location 100% – Color #0966b6

Create a Stacked Calendar Widget With Photoshop | Step 2k

Next we need to right click the layer again and Duplicate Layer. Name it bevel-light and with the Move Tool selected hit the right arrow on your keyboard once to move it 1px.

Create a Stacked Calendar Widget With Photoshop | Step 2l

Right click the bevel-light layer now and go to Blending Options.. We need to modify the Gradient Overlay now using these settings:

Gradient: Location 0% – Color #1876c6 | Location 100% – Color #44a2f3

Create a Stacked Calendar Widget With Photoshop | Step 2m

Now we need to right click the Previous Month group and Duplicate Group.. Name it Next Month then go to Edit > Transform > Flip Horizontal.. Then While holding SHIFT and using the Move Tool drag it to right side of the month-base again 15px from the edge.

Create a Stacked Calendar Widget With Photoshop | Step 2n

Next let’s rename the previous-arrow under the Next Month group to next-arrow, then right click it and go to Blending Options.. Here we will change the Angle of the Drop Shadow to 120.

Create a Stacked Calendar Widget With Photoshop | Step 2o

Last we need to right click the next-arrow again and select Copy Layer Style. Then right click our text layer “July 2013″ and Paste Layer Style.


Step 3: Creating the Days of the Week

First let’s close the Month Navigation group and then Create a New Group name it Days of the Week.

Create a Stacked Calendar Widget With Photoshop | Step 3a

Using the Rectangle Tool let’s create a new rectangle of 274px by 30px with a color of #f5f5f5 and move it up against the bottom of the Month Navigation.

Create a Stacked Calendar Widget With Photoshop | Step 3b

Change your foreground color to #606060 and with the Horizontal Type Tool selected change font settings to.. Font-Family: Helvetica Neue LT (Arial if you don’t have it), Font-style: Medium, Font-size: 12px, Center Text, All Caps.. Write out the first day SUN (Sunday) now. Move it about 8px from the left and center it vertically with the base.

Create a Stacked Calendar Widget With Photoshop | Step 3c

Now right click the SUN text layer and go to Blending Options.. with Drop Shadow we will use these settings now:

Blend Mode: Normal #FFFFFF, Opacity: 100%, Angle: 120, Distance: 1px, Spread: 0%, Size: 0px

Create a Stacked Calendar Widget With Photoshop | Step 3d

Last we need to right click the SUN text layer and Duplicate Layer, then change the text to MON, move it to the right of SUN about 14px.. Repeat this step for each day of the week. We will perfect the alignment at the end of the tutorial when we have columns to align them with.

Create a Stacked Calendar Widget With Photoshop | Step 3e


Step 4: Creating Borders Around the Weeks and Days

First let’s close the Days of the Week group now and Create a New Group again, name it Horizontal Borders.

Create a Stacked Calendar Widget With Photoshop | Step 4a

Then using the Line Tool we’re going to create a Horizontal 274px line with a color of #bbbbbb right beneath the Days of the Week. Give it a name of border-1, again just to keep things organized.

Create a Stacked Calendar Widget With Photoshop | Step 4b

Now we need to duplicate border-1 layer and move the copy 38px down from the original, rename it to border-2 then repeat this step 4 more times so we then have 6 borders and we can see now that 5 empty rows are made.

Create a Stacked Calendar Widget With Photoshop | Step 4c

Next we will create some vertical borders, so close the Horizontal Borders group and Create a New Group, name it Vertical Borders.

Create a Stacked Calendar Widget With Photoshop | Step 4d

Using the Line Tool now with a color of #bbbbbb we’ll create a 225px vertical border on the left starting from the bottom of the Month Navigation. Give it a name of border-1.

Create a Stacked Calendar Widget With Photoshop | Step 4e

Using the Line Tool again we’ll create a 194px vertical line starting from the first horizontal border to the last. Then we will move it 38px to the right of the first vertical border. Give it a name of border-2.

Create a Stacked Calendar Widget With Photoshop | Step 4f

Now we need to duplicate the border-2 layer and move the copy 38px to the right. Repeat this step 4 more times so you should be left with 7 columns.

Create a Stacked Calendar Widget With Photoshop | Step 4g

Last we need to duplicate the border-1 and move it to the far right side to finish up our borders and we now have a nice outline for our weeks and days.

Create a Stacked Calendar Widget With Photoshop | Step 4h


Step 5: Creating the Days

First close the Vertical Border group then Create a New Group and name it Row 1.

Create a Stacked Calendar Widget With Photoshop | Step 5a

Using the Rectangle Tool draw out a 38px by 38px square and place it on the first row and the first column. Name it col-1-base.

Create a Stacked Calendar Widget With Photoshop | Step 5b

Next we need to right click the col-1-base layer and go to Blending Options.. we will add style to it using these settings:

Inner Glow – Blend Mode: Normal, Opacity: 100%, Color: #fafafa, Choke: 100%, Size: 1px

Create a Stacked Calendar Widget With Photoshop | Step 5c

Gradient Overlay – Blend Mode: Normal, Opacity: 100%, Gradient: Location 0% – Color #dddddd | Location 100% – Color #ECECEC, Angle: 90

Create a Stacked Calendar Widget With Photoshop | Step 5d

Next change your foreground color to #606060 and using the Horizontal Type Tool we will create our first day number using these font settings.. Font-Family: Helvetica Neue LT Pro (Arial if you don’t have it), Font-style: Bold, Font-size: 16px, Center Text (IMPORTANT: saves time aligning for the rest), Tracking: 60. Then we will center the number on the col-1-base.

Create a Stacked Calendar Widget With Photoshop | Step 5e

Now right click the 30 text layer and go to Blending Options.. We’re going to apply a Drop Shadow using these settings..

Blend Mode: Normal #FAFAFA, Angle: 120, Distance: 1px, Spread: 0%, Size: 0px

Create a Stacked Calendar Widget With Photoshop | Step 5f

While holding CTRL select both col-1-base and the text layer 30, then right click them and Duplicate Layers. With both the copies selected hold SHIFT and move them right to the second column. Rename col-1-base copy to col-2-base then edit the 30 text layer to 1 with the Horizontal Type Tool. Repeat this step for the entire first row.

Create a Stacked Calendar Widget With Photoshop | Step 5g

Now that we have 1 row done we can speed up the process for the rest. First close the Row 1 group, then right click it and Duplicate Group.. Rename it to Row 2 and then move it down to row 2 on our calendar. Simply use the Horizontal Type Tool now to change the numbers. Then repeat this step for the last 3 rows.

Create a Stacked Calendar Widget With Photoshop | Step 5h

Next we style our previous and next month dates separately from the current months. So open Row 1 group again and right click col-1-base and go to Blending Options.. We just need to change the Gradient Overlay using these settings..

Gradient: Location 0% – Color #ECECEC | Location 100% – Color #f5f5f5

Create a Stacked Calendar Widget With Photoshop | Step 5i

Right click col-1-base again and Copy Layer Style.. Then open Row 5 Group and while holding CTRL select the last three col-base’s (col-5-base, col-6-base, col-7-base) then right click them and Paste Layer Style..

Create a Stacked Calendar Widget With Photoshop | Step 5j

With Row 5 Group still open hold CTRL and select the text layers 1, 2 and 3. You can release CTRL then navigate to Row 1 Group and hold CTRL again and select text layer 30 as well. Then with the Horizontal Type Tool change the font-color to #b6b6b6 and click OK to change them all.

Create a Stacked Calendar Widget With Photoshop | Step 5k

Now we need to style the current days base, it uses the same gradient as the Month Navigation so lets open the Month Navigation Group, right click month-base and Copy Layer Style.. Then open Row 2 Group, right click col-4-base and Paste Layer Style.. Right click col-4-base again and select Blending Options.. Uncheck Stroke and Inner Shadow first, then we will add an Inner Glow with these settings:

Blend Mode: Normal, Opacity: 100%, Color: #155a96, Size: 8px

Create a Stacked Calendar Widget With Photoshop | Step 5l

We just need to change the text color to #FFFFFF with the Horizontal Type Tool. Then right click the 10 text layer and change it’s Drop Shadow settings to this..

Blend Mode: Normal #0966b6, Opacity: 100%, Angle: 120, Distance: 1px, Spread 0%, Size 0px

Create a Stacked Calendar Widget With Photoshop | Step 5m

Before we move on to the last step lets align the Days of the Week with the columns. We can do this quickly with the Smart Guides but if you aren’t familiar with them, select the Move Tool then open Row 1 Group, hold CTRL and click on col-1-base’s thumbnail then click the SUN text layer and Align Horizontal Centers at the top. Repeat for each day.

Create a Stacked Calendar Widget With Photoshop | Step 5n


Step 6: Create the Stacks

First close all open groups and then Create a New Group, name it Stacks. Then with the Rectangle Tool draw out a 274px by 4px rectangle. Name it stack-1 and give it a color of #dedede then place it so the very bottom of the rectangle is over the bottom border of the calendar. Then drag the Stacks group below the Month Navigation group, you shouldn’t see the rectangle anymore.

Create a Stacked Calendar Widget With Photoshop | Step 6a

Now right click the stack-1 layer and go to Blending Options.. we’ll giving it a Stroke using these settings..

Size: 1px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Color: #bbbbbb

Create a Stacked Calendar Widget With Photoshop | Step 6b

Then with the Move Tool selected hit the down arrow on keyboard twice to move the stack-1 layer 2px down. You should now have the first stack visible.

Create a Stacked Calendar Widget With Photoshop | Step 6c

Finally, just duplicate the stack-1 layer and rename the copy to stack-2, then move stack-2 behind stack-1 in the layers palette and using the Move Tool again hit the down arrow 2 more times to create the second stack. Repeat this step for the last stack then we are done!

Create a Stacked Calendar Widget With Photoshop | Step 6d

Read More

Build Your First Website in 1 Day

OFTENTIMES THIS BEST WAY TO LEARN HOW TO DEVELOP PROFESSIONAL QUALITY SITES FOR NEWBIES, NON-PROGRAMMERS AND INTERNET MARKETERS

So you would like to be able to create sites yet you’re less than confident precisely how.

Welllllll, you might perform just like us along with spend a few months studying every knook along with cranny of HTML along with CSS before you even put up the very first webpage. This can result in frustration, sensations to be weighed down along with remarkably increases the likelihood of which you’ll surrender with out a web site to show for it.

OR….. YOU COULD START MASTERING BY UNDERTAKING AND HAVE YOUR PRIMARY WEB SITE UPWARD THAT FEW DAYS.

If you wish to discover anything quickly you have to bounce throughout and start getting the fingers unclean from the beginning. Maybe you have realized that you don’t truly discover anything before you actually try and do it, along with knowledge this firsthand? Nicely that’s what exactly we’ll perform in this course. You’ll discover by building the very first web page this specific week.

And be concerned in the event that HTML along with CSS or perhaps sites normally frighten you. Learning how to create sites is truly a ton less difficult when compared with you believe… should you be taught effectively. And also I shall be below together with you the complete time. I know interact to along with answer many issues you along with other college students get.

As a result of project-based studying along with benefiting effective, totally free tools that you can get on the internet, Let me show you what you should understand so as to create steel celebrity web-sites quickly instead of get aggravated learning HTML along with CSS FOR-EV-ERRRRR (insert Sandlot style here) devoid of an affiliate site as much as show for it.

The simple truth is that most courses along with coaches on the market try and show you an excessive amount of ahead of time, don’t show things inside the right get, or perhaps from time to time this even appears like many people actively make your product too hard.

Using this course We OFFER PEOPLE that you’ll discover how to create sites along with place these on the internet inside of 10 hrs of do the job entire.

Only examine precisely what college students say:

“First 7 training done along with I am able to actually create anything along with recognize this! Initial thousand We make will because you came up for the right time! Timing would not of recently been much better. ” — Tony adamowicz Berardi

“I were able to build a one web page net first of my personal buyers along with bought some $$ from the jawhorse from precisely what We discovered in this course. ” –Jay Mayu

“The course was a sensible way to be able to rule throughout HTML along with CSS quickly along with effectively. I relished precisely how valuable your coaches have been. ” — Jonathan Barra

“I believed your course was quite refreshing, hectic along with fascinating. I relished your face to face aspect of your course and alter anything subsequently along with there and start to see the final results instantaneously. ” -Jimmy Cruz

“I’ve seen (almost) the many video tutorials upon Bootstrap a couple of along with 3 that happen to be available on Metacafe along with I am able to assure that the people you put up are among the best. We are quite thankful for the “little big things” of which you’ve taught us. ” — Rac Santos

What will you discover

– KEY PRINCIPLES: I’ll show you precisely how to utilize a text-editor and also the principles of HTML along with CSS to be able to put up any kind of web site you want and stay wanting to test out your most-advanced principles.

– RAPID PROGRESS: Through finding out utilize effective frameworks along with tools like Bootstrap, Font-Awesome, Yahoo Kinds plus more, you can put up alluring, startup company excellent web-sites quickly

– HTML5 & CSS3 to produce your site look fresh new along with fresh. You may discover the rules along with techniques of the most recent languages. No dated teachings or perhaps 1990s looking web-sites below!

– SENSITIVE DESIGN: Creating regarding net is no extended for under the computer or laptop. We shall show you sensitive design which means that your web site seems wonderful upon many units.

– SIMPLY NO LEVELS REHEARSING: the best way to utilize visitor tools to mess around and see reside alterations upon web-sites to be able to discover more rapidly along with check out your HTML along with CSS of the most useful looking sites

– WONDERFUL IMAGES: You’ll be able to consist of specialist style design along with symbols as part of your web site at no cost

– EVERY TYPE CONNECTED WITH CSS AND HTML YOU MIGHT EMPLOY AS SOON AS DEVELOPING WEBSITES — back links, lists, layouts, graphics, or anything else

And also We won’t halt where by most other courses halt. I am going to show you the best way to rapidly buy your web site reside on the internet along with at no cost

– TOTALLY FREE WEB HOSTING: the best way to save over $100 annually throughout internet hosting service fees

– QUICK DEPLOYMENT: the best way to host your site reside on the internet EASILY

When you’re through with this system…

HTML along with CSS will no longer be a spanish to your account. Instead you might have already created the very first web site and have the skills to construct many others. You may be part of your 1% of individuals that actually know how to create things on the internet and have any life-changing fresh experience — the facility to rule along with create.

Along with your fresh located familiarity with HTML along with CSS you can separate oneself from other people within a task look for, stick to the appreciation, check out a fresh vocation path, the chances are unlimited.

Read More