We have all been there. We get a great idea for a new web site, we want to tell people about it but we don't have any content yet. What do we do? Introducing WP-ParkIt, the new "Coming Soon" Premium WordPress Theme from Solostream.
Latest Posts
Tuesday, June 24, 2014
We have all been there. We get a great idea for a new web site, we want to tell people about it but we don't have any content yet. What do we do? Introducing WP-ParkIt, the new "Coming Soon" Premium WordPress Theme from Solostream.
Paralex is a responsive WordPress Theme (try resizing your browser), suited for business websites and users who want to showcase their work on a neat portfolio site. The Theme is built with Themeple Framework V2 with a lot of new options and Page Builder V2 with drag and drop and resizable blocks.
Demo: http://themeforest[dot]net/item/paralex-multipurpose-responsive-wp-theme/3784634
http://www.hotfiles.ro/download/paralex_v2.0.rar/837228
http://www.mirrorcreator.com/files/0YWSMNWW/paralex_v2.0.rar_links
http://dfiles.eu/files/8utxntxp1
http://www.myUplBox.com/file/download/767880
http://www10.zippyshare.com/v/36267098/file.html
http://www.share-byte.net/cZ92R3
http://fisierulmeu.ro/310GV83UURO2/paralex-v2-0-rar.html
It comes with a lot of options so you can modify the layouts, styling, colors and fonts directly from within the Theme Options. You can use one of 7 predefined skins right out from your WordPress Admin Panel or make yours. Fonts, background and color options as well as the dynamic template builder will help you create the Website you need in no time. In addition to the global options you can set unique styling options for each entry as seen in the theme demo
SEO The theme is build with SEO in mind. Build with valid HTML and CSS and your page can be listened easy by search engines. Headlines always wrapped in heading tags. Content is always before the sidebar.The site also uses heavy internal site linking. Practices like this make your site to get a high google ranking.
We all love WordPress, but in most cases we prefer to hide the fact that we are using a blogging platform for our entire business. From other side every day a couple of new security bugs found in plugins, themes and WordPress itself. This is natural for a popular software but are we safe? Can all plugin authors be notified timely about bugs? Are all of them responsible for security problems they generated? or Can we update our themes and plugins everyday?
View Demo: http://codecanyon[dot]net/item/hide-my-wp-no-one-can-know-you-use-wordpress/4177158
Download Here:
http://www.hotfiles.ro/download/hidemywp_v1.3.rar/836519
http://www.mirrorcreator.com/files/USJPRCNW/hidemywp_v1.3.rar_links
http://dfiles.eu/files/z5cvuafwe
http://www.upl.me/ojwfEo
http://www.myUplBox.com/file/download/767013
http://www67.zippyshare.com/v/18718797/file.html
http://www.share-byte.net/D9N6KV
Hide My WP control access to PHP files. It protects your site from almost 90% of SQL-Injection and XSS attacks caused by direct access to PHP files. This means you can install unsafe plugins without worry about security. - See more at: http://wpwave.com/#sthash.wXY9wDml.dpuf
Wednesday, January 15, 2014
Tutorial Details
Applications Used: Wordpress, jQuery UI
Difficulty: Intermediate
Completion Time: 45-60 minutes
DOWNLOAD - Source Files
WordPress, as a content management system, is often used for creating portfolio websites. With the evolution of user interface design and functionalities, a new trend has emerged: displaying portfolio items in different layouts. This tutorial details the process of creating a dedicated portfolio section in WordPress’ backend, and using jQuery and CSS3 to display the portfolio in a classy manner.
In his tutorial, we are going to extensively use powerful features of WordPress, such as custom posts, custom taxonomies, and we’ll also write a function to fetch our own custom excerpts.
 |
| FINAL PREVIEW |
Step 1 - Installing WordPress and Initializing the Theme.
The first step in creating our portfolio website is to install WordPress. This is a simple task, and, even better, most web hosts out there provide one click installers. However, if you are new to this, here is an awesome guide to help you out with the installation.
Once the installation has completed, we should next create our custom theme which will display our portfolio. There are various methods for creating custom themes. Some prefer to create a new blank white template, while others choose to create child themes of the new TwentyTen template. For this tutorial, we will use the Starker's theme, by Elliot Jay Stocks. It's a completely blank theme with no styling; it’s a great base to build our theme on. Edit the styles.css file, and change the theme name referenced at the top. To install the theme, simply paste the theme folder in thewp-content > themes folder. Once the theme is installed, you can activate it by going to the themes page.
 |
| Change Theme |
Step 2 - Planning the Layout
Our portfolio site will not contain much data. A basic portfolio site contains images of the projects, some tags to identify the projects, and a short description of each. The multi-layout theme will function in such a way that the user can select between a grid and list layout. Like many multi layout websites available, we are not going to load a different page when the user clicks on the list view or the grid view. Instead, we’ll use AJAX to asynchronously load in the new viewer. This is the basic design of how our portfolio site will appear in grid mode: |
| List Layout View |
Step 3 - Setting up the Backend
For our portfolio, we need to register a custom post type, called “project.” We can customize every aspect of a WordPress post. For example, we can change the labels involved, select various features for the post like comments, thumbnails, excerpts, etc.To implement a custom post, edit the functions.php file located within the theme folder. It contains a lot of predefined code, as the naked Starkers theme provides some functionalities of the default TwentyTen template. Don’t be scared or confused; you can append the following code either at the bottom or top of the functions.php file
Don’t leave any empty space at the end of the functions.php file.
/*-- Custom Post Init Begin --*/Once we’ve defined the labels, we need to define the set of arguments for the custom post type. The labels array defined earlier is going to be an argument as well. Once the arguments are defined, we register the custom post type as “project”.
function project_custom_init()
{
$labels = array(
'name' => _x('Projects', 'post type general name'),
'singular_name' => _x('Project', 'post type singular name'),
'add_new' => _x('Add New', 'project'),
'add_new_item' => __('Add New Project'),
'edit_item' => __('Edit Project'),
'new_item' => __('New Project'),
'view_item' => __('View Project'),
'search_items' => __('Search Projects'),
'not_found' => __('No projects found'),
'not_found_in_trash' => __('No projects found in Trash'),
'parent_item_colon' => '',
'menu_name' => 'Project'
);
$args = array(Create Custom Messages for the 'Project' Post
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','author','thumbnail','excerpt','comments')
);
// The following is the main step where we register the post.
register_post_type('project',$args);
}
/*-- Custom Post Init Ends --*/
We can also optionally add custom messages for the custom post type. These messages will be displayed in the WordPress dashboard when we edit or update the custom post. We can do this by creating a filter for the post updated messages in the following manner:
// Add filter to ensure the text Project, or project, is displayed when a user updates a book
add_filter('post_updated_messages', 'project_updated_messages');
function project_updated_messages( $messages ) {
global $post, $post_ID;
$messages['project'] = array(
0 => '', // Unused. Messages start at index 1.
1 => sprintf( __('Project updated. <a href="%s">View project</a>'), esc_url( get_permalink($post_ID) ) ),
2 => __('Custom field updated.'),
3 => __('Custom field deleted.'),
4 => __('Project updated.'),
/* translators: %s: date and time of the revision */
5 => isset($_GET['revision']) ? sprintf( __('Project restored to revision from %s'), wp_post_revision_title( (int) $_GET['revision'], false ) ) : false,
6 => sprintf( __('Project published. <a href="%s">View project</a>'), esc_url( get_permalink($post_ID) ) ),
7 => __('Project saved.'),
8 => sprintf( __('Project submitted. <a target="_blank" href="%s">Preview project</a>'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
9 => sprintf( __('Project scheduled for: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Preview project</a>'),
// translators: Publish box date format, see http://php.net/date
date_i18n( __( 'M j, Y @ G:i' ), strtotime( $post->post_date ) ), esc_url( get_permalink($post_ID) ) ),
10 => sprintf( __('Project draft updated. <a target="_blank" href="%s">Preview project</a>'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
);
return $messages;
}
Registering a Custom Taxonomy
We next need to define a
custom taxonomy for the tags to be used with each of the portfolio
items. You can learn more about the register taxonomy method here.// Initialize New Taxonomy LabelsReturn to your WordPress dashboard, and open the media settings from the
$labels = array(
'name' => _x( 'Tags', 'taxonomy general name' ),
'singular_name' => _x( 'Tag', 'taxonomy singular name' ),
'search_items' => __( 'Search Types' ),
'all_items' => __( 'All Tags' ),
'parent_item' => __( 'Parent Tag' ),
'parent_item_colon' => __( 'Parent Tag:' ),
'edit_item' => __( 'Edit Tags' ),
'update_item' => __( 'Update Tag' ),
'add_new_item' => __( 'Add New Tag' ),
'new_item_name' => __( 'New Tag Name' ),
);
// Custom taxonomy for Project Tags
register_taxonomy('tag',array('project'), array(
'hierarchical' => false,
'labels' => $labels,
'show_ui' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'tag' ),
));
settings
tab. Here, you have to set the default size for the portfolio image
thumbnails. You’ll also notice in the sidebar that the “Project” custom
post type has been successfully registered, along with the custom
taxonomy, “tags.” We can register the default thumbnail size using the set_post_thumbnail
method, but I’ll demonstrate another way to achieve this. You can learn
more about how to set post thumbnail sizes programmatically here. |
| Default Thumbnail Size |
Create Demo Portfolio Items
Create some demo portfolio items by going to projects and clicking on add new.
We require a title for the project, the content, and a thumbnail. We
can see that a tag section has also appeared and confirms that our
custom taxonomy was successfully registered. Add some tags for the
portfolio items, as well. |
| Insert Data |
Step 4 Coding and Styling The Template
Coding the static template
To create the theme, we will first create a static HTML/CSS3 template for the website. This separates the two tasks of making the website look consistent with the design, and fetching the content from the database. Coding the theme directly may be a bit confusing for beginners sometimes – specially, if a lot of content is present in the theme. Create three folders, named
“css”, “images” and “js,” respectively. The general structure for the main content area will be like so:
To create the theme, we will first create a static HTML/CSS3 template for the website. This separates the two tasks of making the website look consistent with the design, and fetching the content from the database. Coding the theme directly may be a bit confusing for beginners sometimes – specially, if a lot of content is present in the theme. Create three folders, named
“css”, “images” and “js,” respectively. The general structure for the main content area will be like so:
<body>
<div id="page-wrap">
<div id="header">
<!-- Header Content Comes Here -->
</div>
<div id="main-content">
<div id="layout-controls">
<!-- Layout Controls Area -->
<a href="#" class="grid"><span>Grid</span></a>
<a href="#" class="list"><span>List</span></a>
<div class="clear"></div>
</div>
<ul id="folio" class="grid">
<li> <!-- Portfolio Item -->
<div class="image">
<!-- Project Thumbnail Area -->
<span>
<a href="#"><img src="" alt=""/></a>
</span>
<a href="#" class="link">View Details</a>
</div>
<div class="content">
<!-- Project Content Area -->
<h2><a href="#">Project Title</a></h2>
<span class="tags">Tags, Tags</span>
<p> The Project Description / Excerpt</p>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
</div><!-- End of Main Content -->
<div id="footer">
<!-- Footer Content Comes Here -->
</div>
</div><!-- End of Page Wrap -->
</body>
Style the Template
Styling the template is dependent on you.
You can experiment with different colors and images to suit your needs.
But for this template, we are going to create a dark grunge theme and
use some fun CSS3 to achieve those subtle hover effects and
transparency. The slicing up of the design into images is rather. As
such, I won’t go over the details here.body{
background: #5a5a5a url('images/bg.jpg') no-repeat center top;
height: 100%;
}
a{
text-decoration: none;
color: #C2FC48;
}
a:hover{
color:#fff;
}
.clear{
clear: both;
}
#page-wrap{
width: 960px;
position: relative;
margin: 0 auto 40px;
}
#header{
height: 111px;
padding: 0 10px 0 50px;
}
#header h1{
float:left;
}
#header h1 a{
font-family: Georgia,Arial,Helvetica,sans-serif;
font-size: 48px;
position: relative;
text-decoration: none;
text-shadow: 2px 2px 1px #000000;
top: 64px;
width: auto;
z-index: 1000;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#header h1 a:hover{
color:#f4f6f0;
}
ul#social{
float: right;
top: 95px;
position:relative;
}
ul#social li{
float: left;
margin-right: 10px;
display: inline;
}
ul#social li a{
width: 16px;
height: 16px;
display: block;
background-image: url('images/layout-icons.png');
text-indent: -99999px;
}
ul#social li a.feed{
background-position: -16px 32px;
}
ul#social li a.facebook{
background-position: 0 32px;
}
ul#social li a.twitter{
background-position: 0 16px;
}
The basic styling for the main container and the layout controls are as follows:
/*--Main Content Styles Start here --*/The following are the general styles for the project list. We will later do specific styling for each grid layout mode and a list layout mode depending on the current class of the folio list.
#main-content{
padding: 50px 50px 28px 50px;
background-color: #000;
border-bottom: 1px #696969 solid;
border-left: 1px #696969 solid;
border-right: 1px #696969 solid;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.3 opacity */
background: rgba(0, 0, 0, 0.3);
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color:#c7c7c7;
line-height: 16px;
}
#main-content a:hover{
color: #fff;
}
#layout-controls{
margin-bottom: 15px;
}
#layout-controls span{
width: 20px;
height: 26px;
display: block;
background-image: url('images/layout-icons.png');
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-indent: -99999px;
}
#layout-controls a{
width: 20px;
height: 26px;
display: block;
float: left;
background-image: url('images/layout-icons.png');
margin-right: 10px;
display: inline;
}
#layout-controls a.grid span{
background-position: left 0;
}
#layout-controls a.grid{
background-position: left -26px;
}
#layout-controls a.list span{
background-position: right 0;
}
#layout-controls a.list{
background-position: right -26px;
}
#layout-controls a:hover span{
opacity: 0; /* other browsers */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* this works in IE6, IE7, and IE8 */
}
/*-------------General Folio Styles Starts Here---------------*/
ul#folio li a{
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul#folio li{
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.3 opacity */
background: rgba(0, 0, 0, 0.3);
padding: 20px;
border: 1px #4c4c4c solid;
margin-bottom: 22px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul#folio li:hover{
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.3 opacity */
background: rgba(0, 0, 0, 0.1);
}
ul#folio li .image{
text-align: center;
}
ul#folio li .image span{
width: 158px;
height: 116px;
display: block;
overflow: hidden;
background-color: #fff;
margin-bottom: 10px;
}
ul#folio li .image span a{
width: 158px;
height: 116px;
display: block;
}
ul#folio li .image a{
font-weight: bold;
}
Also make note that we are not using the general opacity method of achieving transparency using CSS3. Using the opacity method also affects the children of the parent container on which the opacity is applied. Instead, we are using the RGBa method of adding background colors to the container, and using the alpha value to control the transparency of the container.
You can read more about the RGBa Property in this awesome article.
This does not affect the transparency of the children elements. We also need to create IE specific CSS code to support the alpha transparency.
<!--[if IE]>In the HTML structure, you will notice that there is a class given to the portfolio list.
<style>
#main-content, ul#folio li{
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
zoom: 1;
}
ul#folio li:hover{
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#10000000,endColorstr=#10000000);
zoom: 1;
}
</style>
<![endif]-->
<ul id="folio" class="grid">Basically, the “grid” class is used to display the list in a grid view and the “list” class is used to display the list in a list view. In the grid mode, all the extra content is hidden from the user, and in the list mode, all the content is visible to the user. We have two separate sets of styling for each mode. The styles for the grid mode are as follows:
/*------------------Grid Layout Starts Here-------------------*/List mode styles are as follows. At any moment, only one of the grid or list styles is active.
ul#folio.grid li{
width: 158px;
height: 130px;
float: left;
margin-right: 19px;
display: inline;
}
ul#folio.grid li .content{
display: none;
}
ul#folio.grid li .image span a{
width: 158px;
height: 116px;
display: block;
}
ul#folio.grid li.rightmost{
margin-right: 0;
}
/*------------------List Layout Starts Here-------------------*/
ul#folio.list li{
display: block;
}
ul#folio.list li .image,ul#folio li.details .image{
width: 158px;
height: 130px;
float:left;
}
ul#folio.list li .content{
float: left;
padding: 0 10px 0 40px;
width: 598px;
}
ul#folio.list li .content h2,ul#folio li.details .content h2{
font-size: 24px;
color: #C2FC48;
margin-bottom: 6px;
font-family: Georgia, Arial, Helvetica, sans-serif;
}
ul#folio.list li .content span.tags,ul#folio li.details .content span.tags{
color: #fff;
font-size: 11px;
font-style: italic;
margin-bottom: 10px;
display: block;
}
Use jQuery to Add Effects
We next will use jQuery UI
to change the class of the folio list with respect to the layout button
clicked by the user. We’re detecting the click event of the layout
control buttons, fetching the current class and the new class to be
activated, and then using the add and remove class methods to change the classes. We also have a set of parameters which define the speed of the events taking place.var animateSpeed = 500;
jQuery("#layout-controls a").click(function(){
var folio = jQuery('#folio'),
curClass = folio.attr('class'),
newClass = jQuery(this).attr('class');
folio.fadeOut(animateSpeed,function(){
folio
.removeClass(curClass,animateSpeed);
.addClass(newClass,animateSpeed);
}).fadeIn(animateSpeed);
return false;
});
Step 5 Integration with the WordPress Theme
Now that we have completed the static version of the site, we can integrate it with the WordPress theme in a matter of minutes. All we need to do is loop through the posts using awp_query object with a query for the custom post type. Then, we place the content in the respective position in the template.
Edit header.php
First, we need to modify the header.php
template, and include our custom JavaScript files. In this tutorial,
we’ll include jQuery using the Google’s CDN version. We will deregister
the jQuery provided by WordPress, and register Google’s CDN version of
jQuery. Paste the following snippet in your functions.php file.<?phpMove the
/*--- Registering jQuery using Google's CDN */
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"));
wp_enqueue_script('jquery');
}
?>
css, js and images
folders – that you created previously for the static template – to the
WordPress theme folder. Insert the jQuery UI custom file, and the main
script file in the header. Make sure it is inserted below the wp_head method.<script src="<?php bloginfo('template_url');?>/js/jquery-ui-1.8.11.custom.js"></script>
<script src="<?php bloginfo('template_url');?>/js/script.js"></script>
Create the Main Template
Now, you can either create another template in the theme – for example,page-home.php – or you can modify the index.php already present in the theme folder. If you choose the former method, then:- Create a page
- Set the page’s template as the template you just created.
- Go to the reading settings in the
settingstab. - Select the homepage as a static one.
- Select the page you just created as the homepage.
 |
| Reading Setting - Static Page |
get_header()
method, then the main content, which you will code within the template
itself. Lastly, the footer, which you can be included, via the get_footer() method.The following code demonstrates how you can create a custom query using the
wp_query object.<?php $loop = new WP_Query(array('post_type' => 'project', 'posts_per_page' => -1));We are using a variable,
$count =0;
?>
count to count the number of items in the list. We need this because we will keep only four items in each row and assign a ‘rightmost‘ class to every fourth list element. The ‘rightmost‘ class eliminates any right margin to the list elements. Alternatively, we could, in our CSS file, use the li:nth-child(4n) selector.The following code shows how we can loop through the posts and insert the content, as required
<?php if($loop) { ?>Inside the loop, we insert the content in the normal WordPress way, using the
<ul id="folio" class="grid">
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
$loop wp_query
object, of course. The following code shows how we can fetch the
thumbnail of the project post and insert it into the template. Make
proper note of how we use the $count variable to insert the ‘rightmost‘ class on every fourth list element. <li class="item-<?php the_ID() ?> <?php if(++$count%4==0) echo 'rightmost'?> ">Now comes the content section where we need to insert the title, tags, short description and fetch the excerpt for the post with a custom excerpt method. Inserting the title is rather easy, as are the tags. Remember, we previously created a custom taxonomy by the name of tags.
<div class="image">
<span>
<a href="<?php the_permalink() ?>">
<?php
if(has_post_thumbnail()){
the_post_thumbnail('thumbnail');
}
?>
</a>
</span>
<a href="<?php the_permalink() ?>" class="link">View Details</a>
</div>
<div class="content">You will notice that we are not using the general
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<span class="tags">
<?php
// Fetching the tag names with respect to the post and displaying them
$args = array('orderby' => 'name', 'order' => 'ASC', 'fields' => 'names');
echo implode(wp_get_object_terms( $post->ID, 'tag', $args),', ');
?>
</span>
<p>
<?php
// Using custom excerpt function to fetch the excerpt
folio_excerpt('folio_excerpt_length','folio_excerpt_more');
?>
</p>
</div>
<div class="clear"></div>
</li>
<?php endwhile; ?>
</ul>
<?php } ?>
<?php wp_reset_query(); ?>
the_excerpt()
method, provided by WordPress. Instead, we are defining our own custom
method by adding some filters. The general excerpt method returns a
greater length of excerpt than we require. Hence, the custom version.
We’re also modifying the ‘Continue Reading…’ text added at the end of
the default excerpt, and replacing it with ‘Read More’. The following
snippet serves our purpose. This custom excerpt method comes in handy
for plenty of situations.<?php
// Adding Variable Excerpt Length
function folio_excerpt_length($length) {
return 80;
}
function folio_excerpt_more($more) {
return ' ... <span class="excerpt_more"><a href="'.get_permalink().'">Read more</a></span>';
}
function folio_excerpt($length_callback='', $more_callback='') {
global $post;
if(function_exists($length_callback)){
add_filter('excerpt_length', $length_callback);
}
if(function_exists($more_callback)){
add_filter('excerpt_more', $more_callback);
}
$output = get_the_excerpt();
$output = apply_filters('wptexturize', $output);
$output = apply_filters('convert_chars', $output);
$output = '<p>'.$output.'</p>';
echo $output;
}
?>
Step 6 Conclusion
The above method of creating a multi-layout portfolio is quite simple, and uses basic CSS and jQuery tricks to achieve the result. Even better, these techniques can be applied to a variety of projects. Other techniques in this tutorial, like custom post types, custom taxonomies and adding filters to the excerpt method, can be used in various other innovative ways, as well!DOWNLOAD - Source Files
Saturday, August 11, 2012
MAKE YOUR WINDOWS LOOK LIKE AN IPAD
iPadian is a nifty tool that simulates the interface of an iPad on your Windows desktop.
If you're a serious iPad fanatic, here's your opportunity to make your Windows PC take on the appearance of the iPad's graphically impressive interface.
iPadian is a nifty tool that simulates the interface of an iPad on your Windows desktop.
If you're a serious iPad fanatic, here's your opportunity to make your Windows PC take on the appearance of the iPad's graphically impressive interface.
Thursday, July 19, 2012
Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too.
While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs.
Friday, July 13, 2012
This exclusive freebie on Six Revisions, brought to you by www.bestpsdfreebies.com, is a design mockup of an accordion slider that can be used to display content. It comes in 3 variations. Each slider variation has a unique texture design with a hover effect on the 3rd slider tab. This freebie comes in 3 separate and neatly organized PSD files that allow for endless customizable options.
Previews
Here are the 3 accordion sliders:Slider 1
Slider 2
Slider 3
License
Feel free to use this accordion slider for personal or commercial projects. If you would like to share this accordion slider, help us spread the word by linking back to this web page. Thank you!Download
- ultrasleek_accordion_slider_freebie (7.5 MB, ZIP)
This free download is of a PSD template of digital media players. You can use it to mock-up and design user interfaces. This PSD freebie is brought to you by VIVROCKS.com.
Preview
Download
- media_player_ui_psd (ZIP, 0.28 MB)
In this tutorial you will learn how to create a high quality blog layout for your website using photoshop. What are you waiting for go enhance your skills by following this tutorial.
 |  |
Step 1
Create a new a document Width:960px x Height: 1200px, color:#313131
Step 2
Now were going to give our website a little space. First things first, make sure you have your ruler turned on then add a guide line to 0px and 960px.Note: To insert a guide line just select the move tool and click on the grid and drag it.
Now press CTRL+ALT+C for windows or CMD+ALT+C for Mac. Now you should see a Canvas size box. This is how we’re going to give our document more room for our website. Select the left arrow and change the width from 960px to 1160px then press ok.
Now repeat the last step but select the right arrow and change the width from 1160px to 1360px then press ok. Now you should have 960px in the middle
of your document.
Note: If your document is white or any other color on either side just select the paint bucket tool and change it to the background color.
Step 3
Now were going to create a navigation menu. Select the rounded rectangle tool, 5px radius, color:#1c1b1b and draw a rounded rectangle from 0px to 960px. If you’re lost just just draw the rectangle from guide line to guide line.
Step 4
Keep the rounded rectangle tool selected just change the color:#515151, and draw another rounded rectangle slightly over the menu background.
Step 5
Now create a rounded rectangle box color:#fff. Make sure you leave 15px on both sides of the rectangle.
Step 6
Now create another rounded rectangle for our sidebar. Leave a little space at the top for out logo. There is 15px space in between elements.
Step 7
Ok so now that the layout is basically there we will start with adding out menu navigation links. Select the type tool, Arial, Bold, 14px, sharp, color:#686868. Then type out the correct menu links. To get the single line text just double click when you have the type tool selected. Then after you have the text entered create another rounded rectangle color #000 for our rollover.
Step 8
Now were going to make our logo. Select the type tool color:#fff, Arial, Bold, 36px, sharp. Now write out a custom name for your blog.
Now right click on the text layer>>Blending options>>Inner shadow Blendmode:multiply, Opacity:75, Angle:120, Distance0, Choke:0, Size:5.
Then select the color overlay check box and change the color to #3f3f3f. You should now have a letterpress logo effect.
Select the type tool color:#fff, Arial, regular, 10px, sharp. Then write out a sub heading. For the letterpress symbol all that is needed is to duplicate the letterpress text layer and select any symbol from the custom symbol panel. Photoshop will ask you if you would like to rasterize layer and simply click yes then insert your symbol. Your final logo should look exactly like this or similar to the one below
Step 9
Select the rectangle tool color:#313131, then create a rectangle box for our featured slider. Leave 15px on each side and the top.
Now find any image you would like and lets insert it over our slider background leaving 5px around the entire image.
Select the rectangle tool color:#313131, and create a rectangle just a bit above our image then change the opacity to 50%.
Now select the type tool color:#ffffff, Arial, Bold, 18px, Sharp then create a generic post heading.
Step 10
Now we’re going to create our blog post. I will only demonstrate 1 blog post because after you have one completed you can duplicate the rest. Select the rectangle tool color:#313131, then create a rectangle box.
Right click on the box layer>>blending options>>gradient overlay. Blendmode:Normal, Opacity:100, Style:Linear, Angel:90, Scale:100.
Now double click on the gradient bar>> Left Color:#e9e9e9, Right Color:#ffffff.
You should have something like the image below.
Now we will add a thumbnail image to our design. You can use any image just make sure you leave 5px around the entire image. Try to make height similar to mine.
Select the type tool color:#313131, Arial, Bold, 14px, Sharp then create a generic post title.
Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create a generic post information heading. Link color:#cc4343.
Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create a generic excerpt(Little information about the post). Link color:#313131(–>Read More<--).
For our final step select the type tool color:#515151, Arial, Regular, 12px, Sharp then create some post tags. Link color:#cc4343.
Step 11
Now that we have our 1 of the posts completed we can now duplicate the other 4. Group all the layers for the post into one folder then right click on the folder and duplicate group. You can then change titles and thumbnails images if you would like. It makes it seem more like a live website preview.
Step 12
Now we will work on the sidebar. Before we begin working on the sidebar make sure you leave 15px on the sides and top of the sidebar. Google search or create 4 images 125px x 125px for our ad spots. Then place the ads into the sidebar.
Step 13
Select the rectangle tool color:#ededed then create a rectangle box for our popular post widget.
Select the type tool color:#515151, Arial, Regular, 20px, Sharp then create a POPULAR POST heading.
Select the type tool color:#606060, Arial, Regular, 20px, Sharp then create some generic post title headings. Make sure they are all cap so that
they look the same as the images below. The highlighted color:#2c2c2c.
Step 14
For our final step we we now create the footer text. Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create your footer text. Alltext below in image below was used on one line.
You’re now done! Your final layout should look like the image below(Click to enlarge)
Subscribe to:
Comments (Atom)
