タグ

グリッドに関するtaka_maのブックマーク (2)

  • PhotoshopでWebサイトのモックアップをつくるチュートリアル

    Photoshopを使ってWebサイトのモックアップを作るチュートリアルです。ワイヤーフレーム、グリッドを使ってデザインを完成させていきます。Photoshopの詳しい知識は必要ありません。海外ブログの翻訳記事です。Webサイトをデザインする時に作るモックアップ。そのモックアップのチュートリアルです。自分のデザインでは気が引けるので...細かく読んでいくとPhotoshopの小技もいくつか出てきて面白いかも! Webサイトをデザインするときに、Photoshopを使う人は多いと思います。 今回はPhotoshopを使ってWebサイトのモックアップを作るチュートリアルを紹介します。 これからモックアップを作ってみようと思っている人にはとても有益なポストだと思います。 モックアップを作成する時に必須となるグリッドもダウンロードできますよ。 今までに、ウェブサイトレイアウトを設計するにはど

  • レイアウト作りを簡単にしてくれるCSSグリッドシステム

    CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね! Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは? CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

  • 1